在我的角度应用程序中。我正在使用子级和父级组件。我想将数据从父组件传递到子组件。我能够做到。我还有更多数据要传递给子组件。而不是为每个值使用Input属性。我只想使用一个输入,并传递更多的值。可能吗?。请引导我。
我尝试过以数组形式传递多个输入值。问题是我正在childComponent onInit中实现该形式。
ParentComponent HTML
<form class="parentForm" [formGroup]="parentForm">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<input
class=""
type="text"
placeholder=" info"
formControlName="test0"
/>
</div>
</div>
</div>
<app-child
[childForm]="parentForm.controls.childForm"
[Test0]="Test"
[Test1]="Test1"
[Test2]="Test2"
[Test3]="Test3"
[Test4]="Test4"
[Test5]="Test5"
></app-child>
</form>
childComponent TS
@Input() Test: any;
@Input() Test1: any;
@Input() Test2: any;
@Input() Test3: any;
@Input() Test4: any;
@Input() Test5: any;
childComponent HTML
<form [formGroup]="childForm">
<div class="col-md-12">
<div class="row">
<div class="col-md-12" *ngIf="( Test === 't1')">
<input
class=""
type="text"
placeholder=" info"
formControlName="test"
/>
</div>
<div class="col-md-12" *ngIf="(Test1 === 't2')">
<input
class=""
type="text"
placeholder=" info"
formControlName="test1"
/>
</div>
<div class="col-md-12" *ngIf="( Test2 === 't3')">
<input
class=""
type="text"
placeholder=" info"
formControlName="test2"
/>
</div>
<div class="col-md-12" *ngIf="( Test3 === 't4')">
<input
class=""
type="text"
placeholder=" info"
formControlName="test3"
/>
</div>
<div class="col-md-12" *ngIf="( Test4 === 't4')">
<input
class=""
type="text"
placeholder=" info"
formControlName="test3"
/>
</div>
<div class="col-md-12" *ngIf="( Test5 === 't4')">
<input
class=""
type="text"
placeholder=" info"
formControlName="test3"
/>
</div>
</div>
</div>
</form>
答案 0 :(得分:1)
您可以直接在输入中传递对象。
类似的事情应该起作用
ParentComponent.ts
let ultimate_test = {"Test":"t1","Test1":"t2"...}
ParentComponent.html
<app-child [childForm]="parentForm.controls.childForm" [ultimate_test]="ultimate_test"></app-child>
ChildComponent.ts
@Input() ultimate_test: any;
ChildComponent.html
<form [formGroup]='childForm'>
<div class="col-md-12" >
<div class="row">
<div class="col-md-12" *ngIf ="( ultimate_test.Test === 't1')">
<input class="" type="text" placeholder=" info" formControlName="test">
</div>
<div class="col-md-12" *ngIf ="( ultimate_test.Test1 === 't2')">
...
</div>
</div>
</div>
</form>
编辑
我建议您将formControlName
指定为对象ultimate_test
的值。这样,您可以使用Pipe遍历子组件上的值,然后将值直接添加到formControlName
属性中。您不必在每次输入时都使用*ngIf
。