Как использовать [(ngModel)] со значением, которое инициализируется после компонента

Question

У меня есть переменная с именем «x», которая ожидает разрешения обещания для инициализации. Я также хочу использовать в компоненте 'x'. html с

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

, но, поскольку значение не определено сначала, я получаю эту ошибку Невозможно прочитать свойство 'x' неопределенного.

Есть ли способ использовать его с полем ввода ??

Answer 1

1.Инициализировать переменную сначала как пустую

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

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

2. Включить загрузчик при разрешении обещаний

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

3. Показывать загрузку в пользовательском интерфейсе до тех пор, пока обещание не будет выполнено

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

Answer 2

Это происходит потому, что вы не инициализировали переменную. Либо вы можете сделать это в компоненте, либо использовать *ngIf, чтобы ввод был активен только после того, как он получил значение.

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

Если значение, которое нужно привязать, является полем в неопределенном объекте , вы также можете использовать оператор elvis ?.

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