如何将值从一个card-div传递到另一个card-div

Question

我已经在bootstrap中创建了一个具有三个并行div卡的组件。

第一张卡片有一个产品列表，当我点击一个产品时，第二张卡片应该在同一页上显示它的详细信息，但这种情况没有发生，我也不确定为什么。

我尝试过在列表被单击时调用一个方法，当它是一个列表时，这是有效的。

我对动态列表使用了ngFor，所以我看不到该卡上的输出。

`
<div class="row">
  <div class="col-md-2">
      <div class="card">
        <div class="input-group">
            <input type="text" id="search" class="form-control" placeholder="Search" name="search">
            <button class="btn-primary" routerLink="/template/{{id}}"> <i class="material-icons"> add_circle</i></button>

        </div>

        <ul class="list-group" *ngFor="let temp of templates"> 
            <a routerLink=" " class="list-group-item" (click)="temp(1)">{{temp.name}}</a>         
        </ul>
</div>
  </div>
  <div class="col-md-5 pd-2" >
    <div class="card">
        <button class="btn btn-primary" id="btn" routerLink="/template/{{id}}"><i class="material-icons">
            create
            </i></button>
        <div class="template-output">
            {{tempList}}
        </div>

    </div>
</div>

<div class="col-md-5">
    <div class="card">
        <form >
          <mat-form-field>
              <mat-label>Send Form</mat-label>`

Answer 1

您可以在on click函数中传递项目的索引：

<ul class="list-group" *ngFor="let temp of templates; let i = index"> 
   <a class="list-group-item" (click)="temp(i)">{{temp.name}}</a>         
</ul>

然后，在您的控制器中，您可以使用索引设置当前项。

currentTemp:Template;

temp(index:number) {
   this.currentTemp = this.templates[index];
}

最后，在您的第二张卡片中，您可以显示所选项目的信息：

<div class="card">
  <button class="btn btn-primary" id="btn" routerLink="/template/{{currentTemp.id}}">
    <i class="material-icons">create</i>
  </button>
  <div>{{currentTemp.name}}</div>
</div>