如何使用属性绑定将数据传递给angular html组件的输入

Question

我有数据，我需要传递到输入参数在html，但它是在html。我该怎么做呢?

的正确语法是什么?HTML

<div  *ngIf="fruits$ | async as fruit">
<div>
<app-fruits [badFruits]={{ fruit.badFruit }}></app-fruits>  / This line is in error
</div>

如何将badFruit传递给html

中的输入参数

Answer 1

尝试使用:[badFruits]="fruit.badFruit"

<div  *ngIf="fruits$ | async as fruit">
<div>
<app-fruits [badFruits]="fruit.badFruit"></app-fruits>  / This line is in error
</div>
</div>

Answer 2

试试这个app-fruits [badFruits]="fruit.badFruit">

Answer 3

父视图:

<div  *ngIf="fruits$ | async as fruit">
<div>
<app-fruits [badFruit]={{ fruit.badFruit }}></app-fruits>
</div>
</div>

子控制器:

@Input() badFruit;

子视图:

<input type='text' [(ngModel)]="badFruit">

从父组件视图中绑定你想要传递的数据，然后从子控制器中声明数据:重要的是，赋值工作从左变量是指子变量，右边的变量是来自父组件的值。一旦你用@Input()装饰器进行了声明，你就可以从子视图中访问它了。

这对你有用吗?