数组没有在DOM中拼接,但在控制台中它是 - Ionic 2 +/Angular2 +

Question

我有充满活力array的物品和价值观.当用户单击项目上的按钮时,它应该从视图列表中删除该项目.我完全没猜到为什么会这样.它是如何构建数据的？我不这么认为,因为它表明它正在控制台中删除.无论如何谢谢!

TS:

export class Page{
    items: Item[];

    constructor(public alertCtrl: AlertController){}

    removeitem(i) {
        let confirm = this.alertCtrl.create({
            title: 'Confirm',
            message: "text.",
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: () => { 
                        this.presentToast() 
                        this.items.splice(i, 1);

                    }
                }
            ]
        });
        confirm.present();
    }

getItems(){
   this.stopService.getItems().subscribe(item => { 
     this.items = item 
  })

  }


}

HTML:

<div *ngFor="let item of items; index as i ">
    <h3>{{item.description}}</h3>
    <button item-end ion-button full (click)="removeitem(i)">remove item</button>
</div>

编辑

添加服务如何获得物品 -

getItems(): Observable<any> {
         return this.http.get(someEndpoint)
        .map(res => res.json());
    }

Answer 1

尝试执行以下操作:

removeitem(i) {
        let confirm = this.alertCtrl.create({
            title: 'Confirm',
            message: "text.",
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: () => { 
                        this.presentToast() 
                        this.items = [...this.items.filter((item, index) => index !== i];
                    }
                }
            ]
        });
        confirm.present();
    }

这会完全更改对象引用,并应触发DOM更新.

如果这不起作用,请尝试将您的拼接包装在setTimeout中:

setTimeout(() => { this.items.splice(i, 1); }, 0);

您还可以尝试注入public zone: NgZone构造函数并运行splice this.zone.run(() => { this.items.splice(i, 1); });.这是强制变更检测的另一种方式.

编辑:

在您的getItems()方法中,尝试这样做:

    getItems() {
       this.stopService.getItems().subscribe(item => { 
         this.items = [...item];
      });
   }

Plunker参考:

Plunker演示

Answer 2

删除let items =并放在下面的代码

getItems(): Observable<any> {
         return this.http.get(someEndpoint)
        .map(res => res.json());
    }

请参阅此链接以获取更多信息无法找到'object'类型的不同支持对象'[object Object]'.NgFor仅支持绑定到诸如Arrays之类的Iterables