удалить одну или несколько выбранных данных из таблицы в Angular

Я создал таблицу, в которой данные вводятся пользователем с помощью форм. Я использовал сервер JSON для хранения данных. У меня проблема с удалением выбранных данных из таблицы. Как удалить один или несколько выбранных данных пользователем из таблицы.

Я создал таблицу, в которой данные вводятся пользователем с помощью форм. Я использовал сервер 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();
  }
}
0
задан Xesenix 25 June 2019 в 20:25
поделиться

1 ответ

Таким образом, Ваша таблица представляет fieldArray, который является Массивом значений. При удалении корректного объекта из массива, таблица будет повторно представлена и покажет корректные данные, в которых Вы нуждаетесь. Это - основное понятие привязки данных и обнаружения изменения в Угловом :-)

можно использовать fieldArray.splice(index,1) для удаления объекта, который Вы (или пользователь) выбрали

0
ответ дан Udi Mazor 25 June 2019 в 20:25
поделиться
Другие вопросы по тегам:

Похожие вопросы: