Question

大家好我对Angular检测有疑问。

我有这个样本给你： https://plnkr.co/edit/WiCL6qBxSgdvjaZFOgKn?p=preview

当我更新lsIsOpen变量（点击valider按钮）时，Angular不会更新视图。

  public updateData(index, content):void {
this.laBonusRateData[index].content = content;
//Not work
//this.lsIsOpen = 'toto';

//Works
setTimeout(() => {
  this.lsIsOpen = null;
}, 1);

}

你能解释一下为什么吗？我输了:(

Answer 1

原因是你的点击函数showElem绑定到整行。如果你点击valider然后调用updateData和showElem会发生什么。使用setTimeout，在调用showElem之后设置它。更好的解决方案是showElem不会绑定到整个列。

尝试使用此模板：

    @Component({
      selector: 'my-app',
      template: `
        <tbody class="QTZ_default_table_font-bold">
        lsIsOpen : {{lsIsOpen}}
        <tr *ngFor="let bonusType of laBonusRateData; let idx = index">
          <td> <!-- here no click function -->
          <span (click)="showElem('item-'+idx)">items {{this.idx}}</span> <!-- CLICK ONLY ON ITEMS, NOT ON ROW -->
          <div *ngIf="lsIsOpen === ('item-'+idx)">
            <form ngForm="bonus_form" #bonus_form>
              <input type="input" name="content" size="1" [value]="laBonusRateData[idx].content" #content> <a (click)="updateData(idx, content.value)">valider</a>
            </form>
          </div>
          </td>
        </tr>
        </tbody>
      `
    })

角度4 - 变量变化时更新视图

1 个答案: