2016-10-01 105 views
0

在2角我有這個component.html角2 * ngIf爲 '本'

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

是,默認情況下,在我的組件中設置爲false。

基本上,對於每個somethingsomethings我產生,連同我的列表是分配給它的輸入字段和運行editAction()的按鈕。只有當用戶點擊editAction()按鈕時,該按鈕纔會出現。

現在,照樣,點擊editAction()按鈕將啓用列表中的所有輸入字段。我想限制它的意思是確切的li元素。

我不知道Angular 2是否有針對此問題的特定操作,或者這是否爲純javascript解決方案。

+1

您是否考慮過使用ngFor公開的索引? – jonrsharpe

回答

1

注意:此設置不設置默認值iscalled

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

非常感謝!但是,切換選項似乎不起作用。我知道你的錯字,所以它不像我複製粘貼它。邏輯結束了什麼也不做。 – abrahamlinkedin

+1

它應該工作。我很確定。如果您爲'something'對象使用任何模型,而不是確保向該模型添加iscalled屬性。它將按預期工作。 – micronyks

+1

我明白了。如果它不起作用,你可以把'something.iscalled!= something.iscalled'改成'something.iscalled =!something.iscalled' – micronyks