@Input當父組件更改屬性時，子組件不會更新引數。
我遇到的所有類似問題都不能解決問題。
示例：Angular 的子組件中的父變數未更新
或 ... https://pretagteam.com/question/angular-child-component-not-updating-after-change-detection
第一次創建時，該屬性是共享的。但是當我從[(ngModel)]指令（在父組件中找到）進行修改時，它不會將更改傳播到子組件，因此子組件不會收到更新的資料。（它保留在前面的那些，在開頭提供的那些）。
這是父組件：
/**
* Created by cnoe la bestia on 13/12/2021
**/
import {Component, OnInit} from '@angular/core';
import {Pedido, Status} from "../shared/“app.model";
import {ActivatedRoute, Router} from "@angular/router";
import {DataService} from "../shared/data.service";
import {ClienteApiRestPedidosService} from "../shared/cliente-api-rest-pedidos.service";
@Component({
selector: 'createPedidoComponent',
templateUrl: './createPedido.component.html',
styleUrls: ['./crearPedido.component.css']
})
export class FatherComponent implements OnInit {
p : string = "p"
pedido: Pedido ={
deliveryAddress: "",
deliveryCity: "",
deliveryPerson: "",
status: Status.Ordered,
} as Pedido;
...
}
這是 html（部分）：
...
<fieldset class="form-group">
<div class="col-sm-3">
<label class="control-label" for="idSeller">idSeller</label>
<input type="test" class="form-control"
[(ngModel)]="pedido.idSeller" name="idSeller" >
</div>
</fieldset>
<fieldset class="form-group">
<div class="col-sm-3">
<label class="control-label" for="expectedDeliveryDate">expectedDeliveryDate</label>
<input type="test" class="form-control"
[(ngModel)]="pedido.expectedDeliveryDate" name="expectedDeliveryDate" >
</div>
</fieldset>
<br>
<LineaPedidoComponent [pedido] = "pedido" [cabecera] = "cabecera" [llamada] = "p" > </LineaPedidoComponent>
<br>
...
子組件 ts：
/**
* Created by cnoe la bestia on 20/12/2021
**/
import {Component, Input, OnInit} from '@angular/core';
import {LineaPedido, Pedido} from "../shared/“app.model";
import {ClienteApiRestPedidosService} from "../shared/cliente-api-rest-pedidos.service";
import {ActivatedRoute, Router} from "@angular/router";
@Component({
selector: 'LineaPedidoComponent',
templateUrl: './LineaPedido.component.html',
styleUrls: ['./LineaPedido.component.css']
})
export class LineaPedidoComponent implements OnInit {
@Input() pedido : Pedido
@Input() cabecera : boolean | undefined
@Input() llamada :string
id !: number
json: string
constructor(private ClienteApiRestPedidosService: ClienteApiRestPedidosService, private ruta: ActivatedRoute,
private router: Router) {
}
...
}
有任何想法嗎？
uj5u.com熱心網友回復：
您可以嘗試使用 setter 和 getter，或使用 ngOnChanges - 取決于 Padido 資料的實際大小以及您期望它更改的頻率，以及其他變數傳遞給 child 更改的頻率。有關這些選項的簡短介紹，請參閱：
https://javascript.plainenglish.io/dumb-angular-input-setter-getter-vs-ngonchanges-f30e61937926
https://dev.to/angular/angular-setters-vs-ngonchanges-which-one-is-better-4f2b
https://ultimatecourses.com/blog/detect-input-property-changes-ngonchanges-setters
uj5u.com熱心網友回復：
解決方案是將檢測策略更改為 onpush in your child
@Component({
selector: 'LineaPedidoComponent',
templateUrl: './LineaPedido.component.html',
styleUrls: ['./LineaPedido.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/398027.html
標籤：javascript html 有角的 打字稿