1 
<cv-radio-button-group class="duration-radios" 
    [radioItems]="getRadioButtons()" 
</cv-radio-button-group>

所以我有这个 angular 2 组件<cv-radio-button-group>，它是一个定制的单选按钮组。单选按钮的数量由属性决定[radioItems]。这一切都在同步环境中非常有效。

但是现在我正在通过调用服务器在项目中实现它，现在它处于异步环境中。因此，在启动时调用该getRadionButtons()函数，而对服务器的调用仍在执行其操作。并且getRadiobuttons()需要来自服务器的数据来返回正确数量的单选按钮，所以我没有得到正确的结果。

我可以通过单击其他地方并单击返回来强制它运行，从而强制 ngOnInit() 运行。

有没有办法在异步数据完成后强制函数再次返回它？

4

2 回答 2

2

您可以从中至少采用 3 种不同的方法，但听起来您正在寻找一种完整的 DOM 方法，这可以通过使用*ngIf.

对于您的按钮组，您实际上可以使用您的函数创建一个逻辑语句，以在渲染之前检查返回的状态，请注意<ng-container>实际上并不会产生 DOM：

<ng-container *ngIf="getRadioButtons() && getRadioButtons().length>
  <cv-radio-button-group class="duration-radios" 
    [radioItems]="getRadioButtons()" 
   </cv-radio-button-group>
</ng-container>

在上面的代码中，逻辑状态期望首先 getRadioButtons() 返回一个项目，并且（假设它的返回将是一个数组）然后确保在渲染之前填充该数组。

如评论中所述，通常这种类型的检查最好在您的打字稿组件和/或服务中使用 Observables（或 Promise）实现。The Angular: Tour of Heroes - Http很好地、深入地涵盖了这一点。

承诺示例：

const promise =
  new Promise((resolve, reject) => {
  // do some async stuff

  if (CONDITION) resolve(DATA);
  else reject(ERROR);
  })
  .then(
  (data) => { console.log(data); },
  (err) => { console.log(err); }
  );

对于您在组件打字稿中的示例，您component.ts可以像这样添加打字稿：

radioData: any;
isLoaded: false;

getRadioButtons {
  const promise = new Promise((res, rej) => {
    // ... previous radioButtons code ... ends with data.
    res(radioButtonsData) // this sends the data to the promise handlers below
  })
  .then((data) => { this.radioData = data; this.isLoaded = true; })

您可以使用 an*ngIf="isLoaded"或者您可以简单地使用async pipe。

有关 Promise 的详细使用示例和更高级的使用，请查看此链接并转到“编写您的第一个 Promise”部分。

于 2017-09-05T13:21:41.980 回答
0

你为什么不打电话getRadioButtons()，ngOnInit()然后将结果分配给[radioItems].

假设这getRadioButtons()将返回 Observable。

public radioCount;

ngOnInit() {
       this.getRadioButtons().subscribe(
          (data) => {
            this.radioCount = data;
      });
}

.html

<div *ngIf="radioCount">
   <cv-radio-button-group class="duration-radios" 
        [radioItems]="radioCount" 
   </cv-radio-button-group>
</div>
于 2017-09-05T14:16:51.583 回答