如何在角度中使用 OnChanges？

Question

我需要加載每個產品的品種，調查他們告訴我我可以使用 OnChanges 來做到這一點，在選擇產品時會顯示該產品的所有品種。 這里分別是 ts 和 HTML 的代碼。

 this.listadoProductos = this.resolucionDatosCargados['listProduct'].map(item => ({ id: item[0], name: item[1] })); this.parametros['producto'] = this.listadoProductos[0]['id']; this.listadoVariedad = this.resolucionDatosCargados['listVariety'].map(item => ({ id: item[0], idVar: item[1], name: item[2] })); this.parametros['variedad'] = this.listadoVariedad[0]['id'];

 <!-- Producto --> <div fxLayout="row" fxLayoutGap="{{anchoEntreCombobox.MD}}"> <div fxFlex="80" class="bottom-margin"> <mat-form-field [style.width]="anchoCombobox.FULL"> <mat-select placeholder="Producto" [(ngModel)]="parametros.producto" name="product" [disabled]="parametros.todoProducto"> <mat-option *ngFor="let producto of listadoProductos" [value]="producto.id">{{ producto.name }}</mat-option> </mat-select> </mat-form-field> </div> <div fxFlex class="bottom-margin" fxLayoutAlign="start center"> <mat-checkbox [(ngModel)]="parametros.todoProducto" name="allProduct">Todos</mat-checkbox> </div> </div> <!-- Variedad --> <div fxLayout="row" fxLayoutGap="{{anchoEntreCombobox.MD}}"> <div fxFlex="80" class="bottom-margin"> <mat-form-field [style.width]="anchoCombobox.FULL"> <mat-select placeholder="Variedad" [(ngModel)]="parametros.variedad" name="variety" [disabled]="parametros.todaVariedad"> <mat-option *ngFor="let variedad of listadoVariedad" [value]="variedad.id">{{ variedad.name }}</mat-option> </mat-select> </mat-form-field> </div> <div fxFlex class="bottom-margin" fxLayoutAlign="start center"> <mat-checkbox [(ngModel)]="parametros.todaVariedad" name="allVariety">Todos</mat-checkbox> </div> </div>

Answer 1

如果你想在 Angular 中實現 onChanges。 首先，您需要將數據從一個組件傳遞到另一個組件，作為父級到子級或子級到父級。 這就是你實現的方式。

選擇產品會顯示該產品的所有品種。

您需要在 onChanges 生命周期掛鈎上實現 SimpleChanges。 並從組件發送或接收數據。 這只是一個演示，因為您沒有任何孩子和父母的吸引力。

 export class MainComponent implements OnInit,OnChanges {
      
      constructor() { }
   
      ngOnInit(){
       
      }
    
      ngOnChanges(change: SimpleChanges) {
        if (change['nftId']) {
          this.nftId = change['nftId'].currentValue;
        }
      }
    }