Question

在我的代码中，我从TypeScript文件中提取行数据，并通过2 buttons per row添加了HTML。我希望使用splice()删除一行，但无济于事。任何人都可以解释删除失败的原因吗？

HTML文件

<h2>Set Properties</h2>
  <hr>
  <br>
  <table class="table">
    <thead>
      <tr>
        <th class="order">ID</th>
        <th class="order">Key</th>
        <th class="order">Value</th>
        <th class="order">Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let schedule of scheduleList; let i = index'>
        <td>{{schedule.id}}</td>
        <td>{{schedule.key}}</td>
        <td>{{schedule.value}}</td>
        <td>
          <a class="btn btn-success"><span class="fa fa-edit"></span></a>
          <br>
          <br>
          <a class="btn btn-danger" onClick="removeRow(i)"><span class="fa fa-trash"></span></a>
        </td>
      </tr>
    </tbody>
  </table>

TypeScript文件

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'MyFirstAngularApplication-example',
  styleUrls: [ './example.component.scss' ],
  templateUrl: './example.component.html'
})

export class ExampleComponent {

  scheduleList : any[] = [
    {
      "id"    : "1",
      "key"   : "Pricing Key",
      "value" : "Daily Official"  
    },
    {
      "id"    : "2",
      "key"   : "Eligibility Key",
      "value" : "EOD"  
    }
  ]

  removeRow(num) {
    this.scheduleList.splice(num, 1);
  }
}

我是否因为代码完成而导致错误ng-click作为选项？

Answer 1

angular的正确语法是

(click)="removeRow(i)"

Answer 2

您应该使用（点击）代替 onClick

(click)="removeRow(i)"

Answer 3

您可以使用on-click替代语法。见Binding Syntax

无法使用splice（）删除Angular中的行

3 个答案: