代码之家 › 专栏 › 技术社区 › phpdroid

通过将数据存储在类变量中而间接更改UI无效

typescript angular javascript

0

phpdroid · 技术社区 · 8 年前

如果我想在我的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";
}

这也会反映在UI中,效果很好!
但当我试图间接地做到这一点时,不会发生如下情况:

在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中。

怀疑:

如何将帖子的引用保存在class变量中?
这是间接进行更改的正确方法还是我在html本身中传递了数据?

任何帮助都会很好,谢谢!

2 回复 | 直到 8 年前

1

Asura 8 年前

由于finallyDeleteCategory位于循环上下文之外,您不能只传递一个post引用并更改其名称,因为它不存在。

这savedPost。name=“已删除”;不起作用,因为正在循环的元素是posts数组的一部分。您可以做的是将post索引i而不是post对象保存在方法中

(click)="editCategory(i)"

deleteCategory(loopindex){
 this.index=loopindex
}

最终删除类别从数组中检索帖子,然后直接在那里更改。

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

2

0

S.Baah 8 年前

似乎只有在对列表项调用“deleteCategory”方法时才保存已删除的帖子。因此,对于您的设置,只有在您第一次按下其中一个列表项上的编辑按钮时,更改才会反映出来。