角度2 * ngIf为'this'(Angular 2 *ngIf for 'this')

角度2 * ngIf为'this'(Angular 2 *ngIf for 'this')

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

使用此组件.ts ：

editAction(){ this.iscalled = true; }

默认情况下， iscalled在我的组件中设置为false。

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

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

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

In Angular 2 I have this 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>

with this component.ts:

editAction(){ this.iscalled = true; }

iscalled is, by default, set to false in my component.

Basically, for each something of somethings I produce, along with my list is an input field that is assigned to it, and a button that runs editAction(). The button is only there if the user clicks on the editAction() button.

Now, as is, clicking on the editAction() button will enable all input fields in my list. I would like to restrict this to the exact li element that it is meant for.

I don't know if Angular 2 has a specific action for this, or if this is a plain javascript solution.

最满意答案

注意 ：使用此设置时，请不要将iscalled的 默认值设置为false

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

NOTE: with this setup don't set default value of iscalled to false

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

if you want to toggle it then you can do following,

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