Question

我在x.component.html中有一个填充引导卡列表的对象列表，如下所示：

<div *ngFor="let item of items | async">
    <div class="row">
         <div class="col-lg-6">
              <div class="card card-accent-primary">
                   <div class="card-header">
                                            {{item.name}}
                        <label class="switch switch-text switch-pill switch-primary float-right mb-0">
                             <input class="switch-input" type="checkbox" (change)="onSwitchItem($event)">
                             <span class="switch-label"></span>
                             <span class="switch-handle"></span>
                       </label>
                    </div>
                    <div class="card-body"></div>
              </div>
         </div>
    </div>
</div>

我想要选择项目。有没有办法在我的x.component.ts中获取项目对象？

我当前的实现是使用angular属性绑定[id]="item.index"分配索引并使用索引访问items数组。

Answer 1

您可以按如下方式实施。迭代一个“保持”添加子组件轨道的数组。然后一个检查按钮可以触发向数组添加一个新元素，然后ngFor将再次迭代并将新的子组件添加到DOM。

父组件：

<强> HTML

<div *ngFor="let item of items | async">
   <child-card [item]=item></child-card>
</div>

<强>打字稿：

 child = [];

  add() {
    this.childs.splice(0,0,this.childs.length+1);
  }
}

子组件：

HTML

<div class="row">
         <div class="col-lg-6">
              <div class="card card-accent-primary">
                   <div class="card-header">
                                            {{item.name}}
                        <label class="switch switch-text switch-pill switch-primary float-right mb-0">
                             <input class="switch-input" type="checkbox" (change)="onSwitchItem($event)">
                             <span class="switch-label"></span>
                             <span class="switch-handle"></span>
                       </label>
                    </div>
                    <div class="card-body"></div>
              </div>
         </div>
    </div>

<强>打字稿

import { Input } from '@angular/core';

@Component({
    selector: 'card-child',
    ....
}
....
export class cardChildComponent {
    @Input() item;
....
   }

<强> Plunker

从Angular 4元素列表中获取所选元素的对象

1 个答案: