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.