Как добавлять данные в список при каждом нажатии кнопки: Угловая машинопись + Laravel

Question

У меня есть система, подобная показанной ниже. Когда я набираю ссылочный идентификатор, он генерирует соответствующую запись, беря эту запись из БД.

Моя проблема здесь в том, что всякий раз, когда я набираю новый ссылочный номер и добавляю, он просто переопределяет существующую запись, но я хочу, чтобы, когда бы я ни добавлял новую, эту новую запись добавляли в список.

html code

<div *ngIf="show">
    <div class="form-group">
        <div class="col-sm-12">

            <label class="col-sm-12 cm">Details</label>

            <table class="table table-hover">
                <tr>
                    <th>Reference ID</th>
                    <th>First Name</th>
                    <th>Surname</th>
                    <th>Reference </th>
                </tr>

                    <td>{{Details.id}}</td> 
                    <td>{{Details.firstname}}</td>
                    <td>{{Details.lastname}}</td>
                    <td>{{Details.reference}}</td>

            </table>

        </div>
    </div>
</div>

машинопись

add() {
    const data = {
      reference: this.assistant.reference,
    }
    console.log(data);
    this.Service.add(data)
    .subscribe(
      req => {
        console.log("successful");
        this.show = true;
        this.Details.id = req['data']['member_record']['id'];
        this.Details.firstname = req['data']['member_record']['first_name'];
        this.Details.lastname = req['data']['member_record']['last_name'];
        this.Details.reference = req['data']['member_record']['reference'];
      },
      error => {
        console.log(error);
      }

    );
  }

Может ли кто-нибудь помочь добавить записи по одной нажатием кнопкиесть отдельный бэкэнд, где все модели, контроллеры, сервисы написаны соответственно.

PS: и более того, было бы очень полезно, если бы некоторые могли дать мне совет, как удалить эти записи (после того, как япоместите кнопку как следующий шаг) не из БД, а из тех, которые появляются в пользовательском интерфейсе.

Answer 1

Вот мой ответ,

В вашем .html

<table>
    <th>
      <td>Reference ID</td>
      <td>First Name</td>
      <td>Surname</td>
      <td>Reference</td>
    </th>
    <tr *ngFor="let detail of details">
      <td>{{detail.id}}</td>
      <td>{{detail.firstName}}</td>
      <td>{{detail.surName}}</td>
      <td>{{detail.reference}}</td>
    </tr>
</table>

в detail.model.ts

export class Detail {
  id : number;
  firstName : string;
  surName : string;
  reference : string;
}

В вашем .ts

details : Detail[] = [];

Итак, в вашей кнопке добавления есть вызов функции add (), и его реализация должна быть такой,

add(){
   detail = getRecordFromDb(); //get the generated record from table.
   this.details.push(detail); // push above line generated record in to details array.
}