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

Question

如果我想对我的用户界面进行任何更改，那么我会直接传递数据，例如；

在 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";
}

这也会反射(reflect)在用户界面中并且工作正常!
但是当我尝试间接执行此操作时，不会发生如下情况:

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

虽然我将数据保存在类变量中，然后在变量中进行更改，但它不会反射(reflect)在 UI 中。

疑问:

1. 如何将 Post 的引用保存在类变量中？
2. 这是间接进行更改的正确方法还是我已经在 html 本身中传递了数据？

任何帮助将非常感谢!

Answer 1

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

this.savedPost.name="已删除";不起作用，因为被循环的元素是 posts 数组的一部分。您可以做的就是保存帖子索引 i 而不是帖子对象并在方法中

(click)="editCategory(i)"

deleteCategory(loopindex){
 this.index=loopindex
}

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

finallyDeleteCategory(){
  posts[this.index].name="deleted";
}