Question

在Angular 2中，我有 component.html ：

<li *ngFor="let something of somethings">
   <span>{{something}}</span>
   <input class="doit" type="text" *ngIf="iscalled" />
<div id="container">
     <button class="btn btn-warning editsection (click)="editAction()">Edit</button>
</div>
</li>

使用此 component.ts ：

editAction(){ this.iscalled = true; }

默认情况下，

iscalled在我的组件中设置为false。

基本上，对于我生成的每个something somethings，我的列表是一个分配给它的输入字段，以及一个运行editAction()的按钮。只有当用户点击editAction()按钮时，该按钮才会显示。

现在，按原样，点击editAction()按钮将启用列表中的所有输入字段。我想将其限制为它所用的确切li元素。

我不知道Angular 2是否有针对此的特定操作，或者这是否是一个普通的JavaScript解决方案。

Answer 1

注意：使用此设置时，不要将的默认值设置为错误 p>

<li *ngFor="let something of somethings">
     <span>{{something}}</span>
     <input class="doit" type="text" 
            *ngIf="something.iscalled" />       //<<<===changed

     <div id="container">
          <button class="btn btn-warning 
           editsection 
           (click)="editAction(something)">     //<<<===changed
              Edit
           </button>   
     </div>
</li>

editAction(something){ something.iscalled = true; }

如果您想切换，那么您可以执行以下操作，

editAction(something){ something.iscalled != something.iscalled; }

角度2 * ngIf为'this'

1 个答案: