[英]Angular: pass dynamic values to nested components inside ngFor
I have a child component inside a ngFor loop to which i want to send dynamic values.我在 ngFor 循环中有一个子组件,我想向其发送动态值。 This is what i have tried so far, but it does not seem to work
这是我迄今为止尝试过的,但它似乎不起作用
<div *ngFor="let item of clientOtherDetails">
<h1>{{item.name}}<h1>
<app-child-component [firstname]="item.firstname" [secondname]="item.secondname"><app-child-component>
</div>
and in the child component i am using @Input() to get the values在子组件中我使用@Input() 来获取值
@Input() firstname;
@Input() secondname;
I am not getting the dynamic first name and last name我没有得到动态的名字和姓氏
Any advice will be of great help.任何建议都会有很大帮助。 thanks in advance
提前致谢
I think I have a solution for you.我想我有一个解决方案给你。 Please check my code and stackblitz link=>
请检查我的代码和 stackblitz 链接=>
Child TS:儿童 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;
}
Parent HTML:父 HTML:
<div *ngFor="let site of sites">
<app-child [firstname]="site.name" [secondname]="site.sname"></app-child>
</div>
Parent TS:家长 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'}];
}
Note: You cam find the code in this link=> STACKBLITZ DEMO LINK .注意:您可以在此链接=> STACKBLITZ DEMO LINK中找到代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.