Я пытаюсь разработать простое веб-приложение Dart + Angular2. Я прошел курс Tour of Heroes и читал о Дарт.
У меня проблема, которую я не могу понять.
Я пытаюсь создать простое приложение, в котором есть список пользователей, а затем вы можете выбрать пользователя и отредактировать его.
В моем проекте есть 3 файла с дротиками: app_component, user_list и user_edit:
Это мои файлы дротиков:
app_component.dart
@RouteConfig(const [
const Route(path: '/users', name: 'UsersList', component: UserListComponent),
const Route(path: '/user/:id', name: 'UserDetail', component: UserEditComponent)
])
@Component(
selector: 'users',
templateUrl: 'app_component.html',
directives: const [ROUTER_DIRECTIVES],
providers: const [UserService, ROUTER_PROVIDERS]
)
class AppComponent {}
user_list_component.dart
@Component(
selector: 'user-list',
templateUrl: 'user_list_component.html'
)
class UserListComponent implements OnInit {
List<User> users;
final UserService _userService;
final Router _router;
UserListComponent(this._userService, this._router);
Future<Null> ngOnInit() async {
users = await _userService.getUsers();
}
void gotoUser(User user) {
_router.navigate(["UserDetail", {'id': user.userId.toString()}]);
}
}
user_edit_component.dart
@Component(
selector: 'user-detail',
templateUrl: 'user_edit_component.html'
)
class UserEditComponent implements OnInit {
@Input()
User user;
final UserService _userService;
final RouteParams _routeParams;
UserEditComponent(this._userService, this._routeParams);
Future<Null> ngOnInit() async {
var userId = _routeParams.get('id');
if(userId != null) {
user = await _userService.getUser(userId);
}
}
}
В представлении user_list я отображаю данные пользователя в виде таблицы, и у меня есть событие щелчка для каждой строки, которое, как я ожидаю, приведет меня на страницу редактирования пользователя.
user_list_component.html
...
<tbody>
<tr *ngFor="let user of users" (click)="gotoUser(user)">
<td>...</td>
</tr>
</tbody>
...
Выполнение этого в Dartium дает ожидаемый результат, и я могу перемещаться между списком пользователей и страницей редактирования пользователей, но он не работает в любом другом браузере, и браузер не выдает никакой информации об ошибке.
Это ошибка, которую я получаю
js_helper.dart:1729 Uncaught
wrapException @ js_helper.dart:1729
call$0 @ async_patch.dart:561
_microtaskLoop @ schedule_microtask.dart:41
dart._startMicrotaskLoop @schedule_microtask.dart:50
dart._AsyncRun__initializeScheduleImmediate_internalCallback.call$1 @async_patch.dart:54
call$0 @ js_helper.dart:2409
eval$1 @ isolate_helper.dart:462
_callInIsolate @isolate_helper.dart:54
dart.invokeClosure @ js_helper.dart:2409
(anonymous function) @ js_helper.dart:2429
Я пытаюсь изучить Angular с помощью Dart, и я, вероятно, здесь что-то делаю не так, но я не могу понять, что, и я был бы очень признателен за помощь :)
Заранее спасибо.
ИЗМЕНИТЬ 1:
pubspec.yaml
name: test_app
description: Test App
version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
angular2: 2.0.0-beta.21
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart
- dart_to_js_script_rewriter
ИЗМЕНИТЬ 2:
user_edit_component.html
<div *ngIf="user != null">
<label>User </label><span>{{user.userId}}</span>
<label>Name: </label><span>{{user.fullName}}</span>
<label>Domain: </label>
<input [(ngModel)]="user.domain" placeholder="domain"/>
</div>
ИЗМЕНИТЬ 3:
class User {
String userId;
String firstName;
String lastName;
String fullName;
String email;
String domain;
List<String> roles;
User(this.userId, this.domain);
}
@MirrorsUsed()
? Не могли бы вы добавить свойpubspec.yaml
? - person Günter Zöchbauer   schedule 19.09.2016@MirrorsUsed()
. - person djointster   schedule 19.09.2016pub serve
или изpub build
? - person Günter Zöchbauer   schedule 19.09.2016pub serve
, и я пытался загрузить его в Chrome, Firefox и IE11. - person djointster   schedule 19.09.2016.pub
в вашем проекте, затем снова запуститьpub get
и снова запустить приложение. - person Günter Zöchbauer   schedule 19.09.2016.pub
, запустилpub get
и перезапустил, но ошибка не исчезла. - person djointster   schedule 19.09.2016gotoUser(User user)
вызывается, он запускаетngOnInit()
изuser_edit_component
, данные возвращаются из службы, но после этого он выдает ошибку и никогда не отображает страница. - person djointster   schedule 19.09.2016<tbody>
,<tr>
и<td>
(без элементов, связанных с таблицей)? Есть ли у вас привязки внутри<tr>
или<td>
? - person Günter Zöchbauer   schedule 19.09.2016<tr>
у меня есть привязки к некоторым свойствам пользователя. Я изменил таблицу на<ui>
с<li *ngFor="let user of users" (click)="gotoUser(user)">
, и у меня такая же ошибка. - person djointster   schedule 19.09.2016<input [(ngModel)}="user.domain" placeholder="domain"/>
, она отобразит страницу. Я проверил и дважды проверил документацию и думаю, что у меня нет никаких ошибок. - person djointster   schedule 19.09.2016domain
всегда содержит строку? - person Günter Zöchbauer   schedule 19.09.2016domain
этоString
да, но может бытьnull
или пусто - person djointster   schedule 19.09.2016null
и пустой также должны работать. Я тоже не вижу ошибок. Не могли бы вы также добавить классUser
? - person Günter Zöchbauer   schedule 19.09.2016Tour of Heroes
и попытаюсь отредактировать его в соответствии со своими потребностями, вместо того, чтобы создавать свой проект. - person djointster   schedule 19.09.2016print('user.domain: ${user?.domain}');
послеuser = await _userService.getUser(userId);
и запустить его в браузерах, где приложение не может проверить, что оно печатает в консоли браузера. - person Günter Zöchbauer   schedule 19.09.2016