Question

我创建了一个在引导程序中具有三个并行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

您可以在点击功能中传递项目的索引：

<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>

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

1 个答案: