Question

如果我想在我的UI中进行任何更改，那么我直接传递数据，如;

在HTML模板中

<li *ngFor="let post of posts;let i = index;">
  {{i+1}}) {{post.name}}
<button (click)="editCategory(post)" class="btn btn-danger btn-sm">Edit</button>
</li>

在组件TS中

editCategory(post){
 post.name="Something";
}

这也将反映在用户界面中，并且工作正常！
但是当我试图间接地这样做时，不会发生这样的事情：

在HTML模板中

 <li *ngFor="let post of posts;let i = index;">
{{i+1}}) {{post.name}}
<button (click)="deleteCategory(post); modal1.show();" class="btn btn-danger btn-sm">Edit</button>
</li>
<div #modal1="bs-modal">
<button (click)="finallyDeleteCategory(); modal1.show();" class="btn btn-danger btn-sm">Edit</button> //making changes through this button
</div>

在组件TS中

deleteCategory(post){
 this.savedPost=post;
}
finallyDeleteCategory(){
 this.savedPost.name="deleted"; //this Doesn't work
}

在将数据保存在类变量中然后对变量进行更改时，它不会反映在UI中。

疑惑：

如何在类变量中保存Post的引用？
这是间接进行更改的正确方法，还是我在html中传递数据？

任何帮助都会非常感谢！

Answer 1

由于finallyDeleteCategory位于循环上下文之外，因此您无法传递post的引用并更改其名称，因为它不存在。

this.savedPost.name = “已删除”;不起作用，因为循环的元素是posts数组的一部分。你可以做的是保存post index i而不是post对象和方法

Animals

finallyDeleteCategory你从数组中检索帖子然后直接在那里更改。

(click)="editCategory(i)"

deleteCategory(loopindex){
 this.index=loopindex
}

Answer 2

当你在列表项上调用'deleteCategory'方法时，似乎只保存已删除的帖子。因此，对于您的设置，更改将仅反映您首次按其中一个列表项上的编辑按钮时。

通过将数据存储在不起作用的类变量中来间接更改UI

2 个答案: