如何在每个按钮单击时将数据追加到列表:Angular Typescript + Laravel

时间:2018-10-07 14:32:45

标签: angular laravel typescript

我有一个如下所示的系统,每当我键入引用ID时,它都会通过从数据库中获取该记录来生成与该记录相对应的记录。

enter image description here

我的问题是,每当我键入一个新的参考号并添加时,它就会覆盖现有记录,但是我想要的是,当我添加一个新的参考号时,该新记录将被添加到列表中。

html代码

<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:此外,如果有人能给我一些提示(而不是从数据库中而是从UI中显示的记录中删除)的提示(在下一步放置按钮之后),将非常有帮助。

2 个答案:

答案 0 :(得分:0)

这是我的答案,

在您的.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>

indetail.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.
}

答案 1 :(得分:0)

还有另一种解决方法,可以将项目添加到现有列表中。

this.details=([... this.details,...detail])

在这里,明细是我们可以重复添加项目的列表,而明细是我们每次都能获得的新模型。因此,每次都会在细节上附加新数据而不会被覆盖。