时间戳

首页 > 解决方案 > 如何将 [(ngModel)] 与在组件之后初始化的值一起使用

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

问题描述

我有一个变量叫它'x'，它等待承诺解析得到初始化。我也想在component.html中使用'x'

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

但由于最初该值未定义，我收到此错误无法读取未定义的属性“x”。

有没有办法将它与输入字段一起使用？

标签： angularpromiseobservablengmodel

解决方案

1.首先将变量初始化为空

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

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

2.Toggle loader on promise resolve

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

3.在UI上显示加载直到promise被解决

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

推荐阅读