在属性上使用 Array.slice() 时，Angular2 模板不会更新

Question

编辑：在我做了一些改进和重构之后，视图不会再次更新。我在下面编辑了我的更改。

我真的不知道如何将我的问题放在标题中，所以这是更长的版本。

我有一个组件，在初始化时它以数组形式获取数据并存储它。在模板方面，我通过 *ngFor 迭代该数组。现在，当我从数组中切出一个元素或追加一个元素时，如何“告诉” *ngFor 再次迭代并显示更改？

private array: String;  

ngOnInit(){
    this.array = ["lel", "soos", "meme"];
}

updateValues(){
    this.array.splice(1, 1);
}


<div *ngFor="let item of array">
    ...
</div>

updateValues()之后，视图中仍然显示3个项目。

我感谢任何帮助！

编辑：一些更详细的代码：

confirmPostDeletion(post: Post) {
    this.dialogRef = this.dialog.open(ProjectDetailConfirmComponent);
    this.dialogRef.afterClosed().subscribe(result => {
        if (result === 'yes') {
            this.deletePost(post)
        }
        this.dialogRef = null;
    });

}

deletePost(post: Post) {
    this.postService.deletePost(post).subscribe(
        message => this.information = message,
        error => this.errorMessage = error,
        () => {
            this.project.posts.splice(this.project.posts.indexOf(post), 1);
        }
    );
}

模板部分：

<div class="card" *ngFor="let post of project.posts | orderBy: 'id':false">
    <div class="card-block">
                    <div class="row">
                        <div class="col-sm-10">
                            <h4 class="card-title">{{ post.headline }}</h4>
                        </div>
                        <div class="col-sm-1 ml-3">
                            <div *ngIf="adminMode" class="btn-group-sm " role="group">
                                <button id="adminGroupDrop" type="button" class="btn btn-secondary dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit
                                </button>
                                <div class="dropdown-menu" aria-labelledby="adminGroupDrop">
                                    <button type="button" class="dropdown-item">Bearbeiten</button>
                                    <button type="button" (click)="confirmPostDeletion(post)" class="dropdown-item">Löschen</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="card-text">{{ post.content }}</p>
                </div>
</div>

Answer 1

您的示例中的问题是您实际上并未修改数组（array.slice 不会更改数组的内容 - 它只是返回数组的一部分）。

如果您只是正确地改变（修改）组件上定义的变量的值，它应该会自动发现此更改。尝试一下类似的东西：

updateValues(){
    this.array.splice(1, 1);
}

（与

splice

相比，

slice

确实改变了它所操作的数组）

Answer 2

splice 方法不会修改数组。

该方法返回修改后的数组。 例如：

data = arrayValue.splice(1,2);

Answer 3

数组适用于引用而不是值，因此如果删除任何项目，它只会删除其值而不是引用，因此以下是应该解决问题的步骤，

ngOnInit(){
this.array = ["lel", "soos", "meme"];
}

updateValues(){
let tempArray = JSON.parse(JSON.stringify(this.array));//To get completely new copy without references 
tempArray.splice(1, 1);
this.array = tempArray;
}

Answer 4

我也遇到了这个问题，我必须手动调用组件上的

ngChanges()

方法

<app-my-component #myComponentEl [list]="myArray" />

@ViewChild('myComponentEl') public myComponentEl!: MyComponent;
public myArray = [];

updateArray(newItem): void {
  //add as the next-to-last item in the array
  this.myArray.splice(this.myArray.length - 1, 0, newItem);
  this.myComponentEl.ngOnChanges(); //I do not understand why, but the UI will not detect the change in the array so we have to manually call this to make the new item appear!
}

一旦我这样做，该组件将触发我之前已经设置的

ngOnChanges

方法。

希望这对某人有帮助！

Answer 5

您可以将其余代码发布到

updateValues()

被调用的位置吗？需要确保

updateValues()

在哪里得到调用。

另外，在

updateValues()

中，您可以添加一个标志以确保数组更新后，并将

*ngIf

放入

<div *ngFor="let item of array"></div>

例如： 私有数组：字符串；
已更新：布尔值；

ngOnInit(){
    this.array = ["lel", "soos", "meme"];
    this.isUpdated = false;
}

updateValues(){
    this.array.splice(1, 1);
    this.isUpdated = true;
}


<div *ngIf="isUpdated" *ngFor="let item of array">
    ...
</div>