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中找到代碼。