Question

我有一个关于Angular 4和拼接的快速问题。

以下是我的Typescript代码：

delete(appIndex: number): void { this.apps.splice(appIndex, 1); }

以下是我的HTML代码：

<tr  *ngFor="let app of apps; let i = index">
      <td><input type="text" [(contenteditableModel)]="text1"  tabindex="1"> {{ text1 }}</td>
      <td><input type="text"  [(contenteditableModel)]="text2" tabindex="2">{{ text2 }}</td>
      <td><input type="text"  [(contenteditableModel)]="text2" tabindex="3">{{ text3 }}</td>
      <td class="actions">
        <input type="button" value="Delete" (click)="delete(i)">
      </td>
    </tr>

我遇到的问题是'无法读取未定义的属性'splice'。当我进一步研究这个时，我发现在Angular 1中，'$ scope'用于在DOM中访问。我如何在Angular 4中复制它？

更新：

我已将我的代码编辑为：

打字稿：

 delete(appIndex: number) {
this.apps.splice(appIndex, 1);
this.changeDetectorRef.detectChanges();

}

HTML：

  <tr class="odd">
      <td class="status"><img src="../../../assets/images/Red_Circle_1.png" class="redcircle"></td>
      <td><input type="text" [(contenteditableModel)]="text4"> {{ text4 }}</td>
      <td><input type="text" [(contenteditableModel)]="text5">{{ text5 }}</td>
      <td><input type="text" [(contenteditableModel)]="text6">{{ text6 }}</td>
      <td class="actions">
          <input type="button" value="Delete" *ngFor="let app of apps; let i = index" (click)="delete(i)">
      </td>
    </tr>

以下是plunker：http://plnkr.co/edit/2KaXodEe2CbQdLXZtVaC?p=preview

我现在没有收到任何错误，但删除按钮根本没有显示。任何建议将不胜感激。

谢谢。

Answer 1

只要您从其调用模板的组件执行delete，您的代码就可以正常运行。

这基本上是相同的代码：Live demo

Angular 4：表中的deleteRow，拼接错误

1 个答案: