Я пытаюсь обновить свой просмотр после того, как событие websocket возвращает обновленные данные.
Я ввел услугу в свое приложение и вызвал метод getData() в службе. Этот метод выдает событие socket.io на мой NodeJS-сервер, который, в свою очередь, выполняет внешний вызов api и анализирует некоторые данные. Затем сервер NodeJS передает событие успеха с новыми данными, которые я слушаю в своей службе. Когда событие успеха возвращается, я затем обновляю свое свойство в службе, на которую ссылаются в моем представлении.
Однако независимо от того, что я пытаюсь, я не могу получить данные, которые будут отображаться после обновления свойства.
Я искал несколько дней, и все, что я нахожу, это сообщения в блоге, в которых говорится, что это изменение должно быть плавным, или что мне нужно каким-то образом включить zone.js или попробовать ту же логику с помощью форм (однако я пытаюсь сделайте это без взаимодействия с пользователем). Ничто не работает для меня, и я немного расстроен.
Например:
Скажем, я получаю массив строк, который я хочу создать несортированный список с.
app.ts
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {MyService} from 'js/services/MyService';
// Annotation section
@Component({
selector: 'my-app',
viewInjector: [MyService]
})
@View({
templateUrl: 'templates/my-app.tpl.html',
directives: [NgFor]
})
class MyComponent {
mySvc:MyService;
constructor(mySvc:MyService) {
this.mySvc = mySvc;
this.mySvc.getData();
}
}
bootstrap(MyComponent, [MyService]);
MyService.ts
let socket = io();
export class MyService {
someList:Array<string>;
constructor() {
this.initListeners();
}
getData() {
socket.emit('myevent', {value: 'someValue'});
}
initListeners() {
socket.on('success', (data) => {
self.someList = data;
});
}
}
мой-app.tpl.html
<div>
<h2>My List</h2>
<ul>
<li *ng-for="#item of mySvc.myList">Item: {{item}}</li>
</ul>
</div>
Интересно, что я обнаружил, что если я включу тайм-аут в своем компоненте, который обновит какое-то произвольное свойство, которое я установил в представлении после того, как свойство someList будет обновлено из обратного вызова успеха, тогда оба значения свойств будут обновлены правильно в одно и то же время.
Например:
new app.ts
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {MyService} from 'js/services/MyService';
// Annotation section
@Component({
selector: 'my-app',
viewInjector: [MyService]
})
@View({
templateUrl: 'templates/my-app.tpl.html',
directives: [NgFor]
})
class MyComponent {
mySvc:MyService;
num:Number;
constructor(mySvc:MyService) {
this.mySvc = mySvc;
this.mySvc.getData();
setTimeout(() => this.updateNum(), 5000);
}
updateNum() {
this.num = 123456;
}
}
bootstrap(MyComponent, [MyService]);
new my-app.tpl.html
<div>
<h2>My List {{num}}</h2>
<ul>
<li *ng-for="#item of mySvc.myList">Item: {{item}}</li>
</ul>
</div>
Итак, как мне следует получить angular2, чтобы узнать, что данные изменились после события "success" без обновления какого-либо другого свойства?
Есть ли что-то, что мне не хватает с помощью директивы NgFor?
