如何使用屬性綁定將數據傳遞給 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>

孩子 controller：

@Input() badFruit;

子視圖：

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

在父組件視圖中，您綁定要傳遞的數據，然后形成子 controller 聲明該數據：重要的是，左側變量的賦值是指子上的變量，右側的變量是來自父級的值。 使用 @Input() 裝飾器聲明后，您可以從子視圖訪問它。

這對你有用嗎？