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

时间:2016-11-18 18:49:50

标签: angular angular2-template

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

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

我有一个组件,在init上它将数据作为数组获取并存储它。在模板方面,我通过* 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>

3 个答案:

答案 0 :(得分:2)

您的示例中的问题是您实际上没有修改数组(array.slice 不会更改数组的内容 - 它只返回它的一部分)。< / p>

如果你只是正确地改变(修改)组件上定义的变量的值,它应该自动找出这个变化。尝试使用类似的东西:

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

slice 会更改其运作的数组)

答案 1 :(得分:1)

splice方法不会修改数组。

此方法返回已修改的数组。 例如:

data = arrayValue.splice(1,2);

答案 2 :(得分:-2)

您可以在updateValues()致电的地方发布其余代码吗,需要确保updateValues()拨打电话。

同样在updateValues()中,您可以添加一个标记,以确保在数组更新后,并将*ngIf放入<div *ngFor="let item of array"></div>

例如:     private array:String;
    isUpdated:boolean;

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>