Angular 11 填入 HTML

Question

我遇到了一个问题，主要是我无法在输入中填写值，而是在 HTML 中。我搜索了但似乎没有任何效果。我尝试了值、(value)、[(value)]、"k.bag.ConstructionYear"、"{{k.bag.ConstructionYear}}" 和其他组合，但似乎没有任何效果。

mycomponent.html

<ng-container
  *ngIf="{
    // other stuff
    firstStepState: firstStepState$ | async
  } as o"
>
  //........
  <ng-container *ngIf="{
          bag : testService.getData(o.firstStepState.value1, o.firstStepState.value2) | async
        } as k">

    <ng-container *ngIf="k.bag !== undefined && k.bag !== null">
    {{k.bag.ConstructionYear}} // <-- this is showing 

    <input
        type="text"
        name="constructionYear"
        formControlName="constructionYear"
        id="constructionYear"
        data-test="constructionYear"
        placeholder=""
        [value]="k.bag.ConstructionYear" <-- this is the problem
    />

Answer 1

<input
    type="text"
    name="constructionYear"
    formControlName="constructionYear"
    id="constructionYear"
    data-test="constructionYear"
    placeholder=""
    [(ngModel)]="k.bag.ConstructionYear"
/>

用于绑定您的数据

Answer 2

通过将 formControlName="constructionYear" 分配给输入，您将此输入的值控制委托给您的 formControl。从此时起，您应该随时更新 ts 代码的逻辑形式，而不是输入的值。例如通过方法 control.setValue(newValue)

Angular 11 填入 HTML

Angular 11 fill input in HTML

html

angular

angular11