如何识别特定的列表元素字段并将其显示对象的属性设置为 true答案

【问题标题】：how to identify specific list element field and set its displaying objects's property to true如何识别特定的列表元素字段并将其显示对象的属性设置为 true
【发布时间】：2016-08-07 16:56:15
【问题描述】：

所以使用 *ngFor 我显示了对象的 name 属性列表，这个对象还有一个名为 isAvailable 的属性我想设置 isAvalable 属性以在单击它时在真假之间切换，并基于 isAvalible 下一个文本to li 将显示是否可用

<p>Authors</p>
<ul>
<li *ngFor='let author of authors' (click)='onClick()'>
{{author.name}}
</li>
</ul>

【问题讨论】：

标签： javascript html dom angular angular2-template

【解决方案1】：

据我了解，您想要这个

<p>Authors</p>
<ul>
   <li *ngFor='let author of authors'>
     <span [hidden]='author.isAvalible'>{{author.name}}</span>
     <span (click)='author.isAvalible = !author.isAvalible '>author.isAvalible</span>
   </li>
</ul>

【讨论】：

那么如果有点击事件并且我们正在根据这个事件更改属性，会发生什么，列表会重新渲染吗？并查看 isAvailable 属性是否为 true，在其旁边显示文本
@blackHawk 它将检查它所绑定的项目的 isAvalible 并显示或隐藏 author.name
它是如何发生的我的意思是单个项目并重新检查它的依赖关系
它会遍历列表，看看是否为真会显示是否为假隐藏

【解决方案2】：

<p>Authors</p>
<ul>

   <li *ngFor='let author of authors'>
        <span [hidden]='author.isAvalible'>{{author.name}}</span>
        <span (click)='onClick()'>author.isAvalible</span>
    </li>
</ul>


onClick(value){
   value=!value;
}

【讨论】：

您还可以在 HTML 模板本身中处理点击事件，如其他答案所示。
那么如果有点击事件并且我们正在根据这个事件更改属性，会发生什么，列表会重新渲染吗？并查看 isAvailable 属性是否为 true，在其旁边显示文本
列表在页面加载时呈现。然后根据点击事件，您只需切换特定的li。你显示它并隐藏它。列表不会每次都被渲染..