Question

我创建了一个带有角度2的NativeScript应用程序，我有一个对象数组，我期望在应用程序的前端看到。行为是，如果我直接在ngOnInit（）内部将对象推入数组，它可以工作，但如果我在ngOnInit（）中创建一个承诺它不起作用。这是代码：

export class DashboardComponent {
     stories: Story[] = [];

     pushArray() {
         let story:Story = new Story(1,1,"ASD", "pushed");
         this.stories.push(story);
     }

     ngOnInit() {
         this.pushArray(); //this is shown

         var promise = new Promise((resolve)=>{
             resolve(42);
             console.log("promise hit");
         });

         promise.then(x=> {
             this.pushArray(); //this is NOT shown
         });
     }
 }

相对html是：

<Label *ngFor="let story of stories" [text]='story.message'></Label>

当应用程序启动时，我只看到一次推送，但是我创建了一个触发“console.log（JSON.stringify（this.stories））”的按钮;“在那一刻，当我点击按钮时，ui似乎检测到更改的数组，并出现另一个推送的对象。

修改

我在这个帖子中创建了一个更简单的例子：Angular 2: when i change a variable in a promise.than in ngOnInit the view doesn't refresh

Answer 1

更改检测基于引用，将元素推送到数组不会触发它。尝试更新这样的引用：

this.stories.push(story);
this.stories = this.stories.slice();

Answer 2

        setTimeout(function () {
            this.stories.push(story);
        }, 0);

我在推入嵌套数组方面遇到了麻烦，几乎是随机刷新结果，直到我难以理解这个规范：

基本上应用程序状态更改可能由三件事引起：

活动 - 点击，提交，...
XHR - 从远程服务器获取数据
计时器 - setTimeout（），setInterval（）

（https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html#what-causes-change）

所以我尝试了setTimeout，并奇迹般地工作了......

Answer 3

我认为解决这个问题的最好方法是在 *ngFor 指令中添加 (trackBy:trackByFn)：

<Label *ngFor="let story of stories; trackBy:trackByFn" [text]='story.message'></Label>

并在 Typescript 的类组件中添加 trackByFn 方法：

trackByFn(index: any, item: any) {
    return index;
}

在ngOnInit promise中数组推送后，Angular 2不刷新视图

3 个答案: