Angular 数组未在DOM中拼接，但在控制台中为-Ionic 2+/角度2+；

我有一个动态的

数组

充满了项目和值。当用户单击项目上的按钮时，应将该项目从视图列表中删除。我完全猜不出这是为什么。这会是数据的结构吗？我不这么认为，因为这表明它正在控制台中被删除。无论如何，谢谢

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 
  })

  }


}

<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>

HTML:

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 
  })

  }


}

<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>

{{item.description}
删除项目

编辑

添加服务如何获取项目--

getItems（）：可观察{
返回此.http.get（someEndpoint）
.map（res=>res.json（））；
}

正如@robbannn所说，angular没有检测到变化，所以要改变

this.items.拼接（i，1）

到

this.item=this.items.splice（i，1）.slice（）
角度变化检测器似乎没有触发。您可以手动调用它：

import {  ChangeDetectorRef } from '@angular/core';
constructor(private changeDetectorRef: ChangeDetectorRef  ){

}
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);
                        this.changeDetectorRef.detectChanges();//call ng2 change detector here
                    }
                }
            ]
        });
        confirm.present();
    }

尝试执行以下操作：

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);

您还可以尝试在构造函数中注入
公共区域：NgZone
，然后运行
在
this.zone.run（（）=>{this.items.splice（i，1）；}）中拼接。这是强制更改检测的另一种方法

编辑：

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 
  })

  }


}

<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（）
方法中，尝试执行以下操作：

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

普朗克参考：

删除
让项目=
并放在代码下面

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

getItems（）：Observable
如何获取/设置项目？听起来Angular没有检测到更改。问题是我能够让拼接在DOM中使用假数据而不是动态数据工作。基本上做同样的事情。还添加了serviceUnrelated:in-let items=this.http.get（someEndpoint.map）（res=>res.json（））；退货项目；map已经返回了该值，所以您可以返回这个.http.get（someEndpoint.map）（res=>res.json（））；不幸的是，它仍然没有从DOM中删除包含切片的对象。此解决方案不起作用。我正在为检测到的更改进行未定义您在哪里进行了未定义？您是否在构造函数中声明了
changeDetectorRef
？是的，我刚刚在控制台中记录了this.changeDetectorRef.detectChanges（）嗯。。。这是一个函数。如果它不返回值，默认值是取消定义两个选项的相同结果：（仍然不工作..这也是我在控制台中看到的--因此数组仍在拼接..只是没有在DOM中显示--（22）[{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] .                     (21) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]