Angular 双向数据绑定 - 更改值

Question

我有一个带有输入的表格。

<form #modelContrato="ngForm" role="form" >
<input [(ngModel)]="modelContrato.numero" id="numero" class="form-control" name="numero" type="text" autocomplete="off" placeholder="Número Contrato"
                                        #numero="ngModel" required />

在我的 component.ts 上有这些行。

@Input() modelContrato: Contrato;

关于构造函数

this.modelContrato = {} as Contrato;

ngOnInit

this.modelContrato.numero = '10';

ps: Contrato 是一个模型。像这样

export interface Contrato {
    id: string;
    contratoPrincipalId: string;
    numero: string;
}

为什么我的输入没有改变 OnInit 中传递的值？

Answer 1

通用解决方案：使用 @ViewChild 来引用元素。 https://angular.io/api/core/ViewChild

您的个人问题解决方案：只需在您的组件中创建一个字段

const modelContrato: Contrato;

因为 [(ngModel)]="modelContrato.numero" 双向绑定到 modelContrato numero 属性到输入元素值

为什么您的代码不起作用：您错误地将 input 元素绑定到 @input 装饰器。 @input 装饰器用于将属性从祖先组件传递到后继组件。 https://angular.io/guide/component-interaction

Angular 双向数据绑定 - 更改值

Angular Two-Way-Databind - Change Value

angular

input

angular4-forms

ngmodel