如何将 [(ngModel)] 与在组件之后初始化的值一起使用

Question

我有一个名为 'x' 的变量，它等待 promise 解析以进行初始化。我还想在 component.html 和

中使用 'x'

<input [(ngModel)]='x' />

但是因为一开始这个值是未定义的，所以我得到了这个错误无法读取未定义的属性 'x'。

有没有办法在输入字段中使用它？？

Answer 1

发生这种情况是因为您没有初始化变量。您可以在组件中执行此操作，也可以使用 *ngIf 以便输入只有在获得值后才会激活。

<div *ngIf="x">
    <input [(ngModel)]="x"/> 
</div>

如果要绑定的值是未定义对象中的字段，也可以使用elvis运算符?.

<input [ngModel]="object?.x" (ngModelChange)="object.x=$event"/>

Answer 2

1.Initialize 变量一开始为空

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  x : any = '';
}

2.Toggle promise resolve 的装载机

this.loader = true;
  performFakeCall().then(function(result) {
    this.loader = false;
    //...
  });

3.Show 在 UI 上加载，直到 promise 得到解决

<div *ngIf="loader == false">
  <input [(ngModel)]="x"/> 
</div>
<div class="css-loader" *ngIf="loader == true">
   //...show loader
</div>

如何将 [(ngModel)] 与在组件之后初始化的值一起使用

How to use [(ngModel)] with a value that gets initialized after the component

promise

observable

ngmodel

angular