Angular：将动态值传递给 ngFor 内的嵌套组件

Question

我在 ngFor 循环中有一个子组件，我想向其发送动态值。 这是我迄今为止尝试过的，但它似乎不起作用

<div *ngFor="let item of clientOtherDetails">

<h1>{{item.name}}<h1>

<app-child-component [firstname]="item.firstname" [secondname]="item.secondname"><app-child-component>

</div>

在子组件中我使用@Input() 来获取值

@Input() firstname;
@Input() secondname;

我没有得到动态的名字和姓氏

任何建议都会有很大帮助。 提前致谢

Answer 1

我想我有一个解决方案给你。 请检查我的代码和 stackblitz 链接=>
儿童 TS：

import { Component, Input, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    First:  <input type="textbox" [(ngModel)]='firstname'><br>
    Second: <input type="textbox" [(ngModel)]='secondname'> 
  `
})
export class AppChildComponent {
  //getting value from parent to child
  @Input() firstname: string;
  @Input() secondname: string;
}

父 HTML：

<div *ngFor="let site of sites">
  <app-child [firstname]="site.name" [secondname]="site.sname"></app-child>
</div>

家长 TS：

import { Component, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  sites=[{name:'aa',sname:'s-aa'},{name:'bb',sname:'s-bb'},{name:'cc',sname:'s-cc'}];
}

注意：您可以在此链接=> STACKBLITZ DEMO LINK中找到代码。