Question

我创建了一个表格，用户可以在表格的帮助下输入数据。我已使用JSON服务器存储数据。我在从表中删除所选数据时遇到问题。用户如何从表中删除一个或多个选定数据。

app.component.html

<table style="color:blue; border: 1px solid black;">
  <thead>
    <tr>
      <th style="border: 1px solid black;">
        Issue Description
      </th>
      <th style="border: 1px solid black;">
        Severity
      </th>
      <th style="border: 1px solid black;">
        status
      </th>
      <th style="border: 1px solid black;">
        Created date
      </th>
      <th style="border: 1px solid black;">
        Resolved date
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let field of fieldArray">
      <td>{{ field.description }}</td>
      <td>{{ field.severity }}</td>
      <td>{{ field.status }}</td>
      <td>{{ field.createddate }}</td>
      <td>{{ field.resolveddate }}</td>
    </tr>
  </tbody> 
</table>
<br>
<form style="color:brown">
  Enter Issue Description:
  <input
    class="form-control"
    type="text"
    id="newAttributeName"
    [(ngModel)]="newAttribute.description"
    name="description"
  />
  <br><br>
  Severity
  <select name="severity" [(ngModel)]="newAttribute.severity">
    <option value="minor">minor</option>
    <option value="major">major</option>
    <option value="critical">critical</option>
  </select>
  <br><br>
  status
  <select name="status" [(ngModel)]="newAttribute.status">
    <option value="open">open</option>
    <option value="In Progress">inprogress</option>
    <option value="closed">closed</option>
  </select>
  <br><br>
  Created date:
  <input
    type="date"
    class="form-control"
    id="newAttributecreateddate"
    [(ngModel)]="newAttribute.createddate"
    name="createddate"
  >
  <br><br>
  Resolved date:
  <input
    type="date"
    class="form-control"
    id="newAttributeresolvedate"
    [(ngModel)]="newAttribute.resolveddate"
    name="resolveddate"
  >
  <br><br>
  <button
    [disabled]="!newAttribute.description || !newAttribute.severity || !newAttribute.status || !newAttribute.createddate
    || !newAttribute.resolveddate" 
    class="btn btn-primary"
    (click)="addFieldValue($event)"
  >
    Add
  </button>
</form>

app.component.ts

export class AppComponent implements OnInit {
  title: string;
  recenltyAddedProduct: any;
  fieldArray: Array<any>;
  newAttribute: any;

  constructor(
    private httpClient: HttpClient,
  ) {
    this.title = "assignment3";
    this.fieldArray = [];
    this.newAttribute = {};
  }

  fetchData = function() {
    this.httpClient
      .get("http://localhost:3000/products").subscribe(res => {
        this.fieldArray = res;
      });
  };

  addFieldValue() {
    this.fieldArray.push(this.newAttribute);
    this.recenltyAddedProduct = this.newAttribute;
    this.newAttribute = {};
    this.httpClient
      .post("http://localhost:3000/products", this.recenltyAddedProduct)
      .subscribe(res => {
        console.log("added");
      });
  }

  ngOnInit() {
    this.fetchData();
  }
}

Answer 1

因此您的表正在呈现fieldArray，它是一个值数组。如果从数组中删除正确的项目，则表将重新呈现并显示所需的正确数据。那就是Angular中数据绑定和更改检测的主要概念：-）

您可以使用fieldArray.splice(index,1)删除您（或用户）选择的项目

从Angular表中删除一个或多个选定数据

1 个答案: