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

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

typescript angular javascript

phpdroid · 技术社区 · 7 年前

如果我想在我的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 回复 | 直到 7 年前

Asura 7 年前

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

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

(click)="editCategory(i)"

deleteCategory(loopindex){
 this.index=loopindex
}

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

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

S.Baah 7 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前