如何基于 Angular 中的 Promise 执行 ngIf？

Question

我正在尝试做一个 ngIf ，其结果取决于承诺。

模板

<div>
  <select [(ngModel)]="carValue" name="carName">
    <option value="renault">Renault</option>
    <option value="bmw">Bmw</option>
  </select>
  <p *ngIf="isDisplayed()">Good choice!</p>
</div>

到目前为止，函数 isDisplayed 是

isDisplayed() {
  return this.carValue === 'bmw';
}

但我希望它是异步的。就像是

isDisplayed() {
  return this.getBestChoice().then((result) => result);
}

getBestChoice() {
  // fake http call
  return new Promise((resolve) => {
    setTimeout(() => resolve('bmw'), 3000);  
  });
}

显然这是行不通的。我有如何实现这个的想法，但不确定它是否干净。

• 绑定一个事件 ngModelChange。每次用户挑选新车时。它重新加载变量“isDisplayed”
• 保存承诺并在模板中使用 aync 管道。但它不会重新加载数据。

这是一个朋克。

Answer 1

我是这样解决的：

类.ts

export class FieldHeaderSectionComponent implements OnInit {
  hasBody: Promise<boolean>;

  constructor() {
    this.hasBody = this.haveBody();
  }
  
  public haveBody() : Promise<boolean> {
    // ... logic
    return Promise.resolve(false);
  }  
}

模板.html

<div *ngIf="hasBody | async">...</div>