加载异步数据后强制函数返回属性绑定的值

问题描述：

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

所以我有这个角度2组件<cv-radio-button-group>这是一个自定义的单选按钮组。单选按钮的数量由属性[radioItems]确定。这一切都将在同步环境中运行。加载异步数据后强制函数返回属性绑定的值

但现在我正在实施它与项目调用服务器，现在它在异步环境。因此，在启动时调用getRadionButtons()函数，这对服务器的调用仍在做它的事情。而getRadiobuttons()需要来自服务器的数据来返回正确数量的单选按钮，所以我没有得到正确的结果。

我可以强制它通过点击其他地方，并点击返回，迫使ngOnInit（）运行。

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

可以返回一个承诺或从你的'getRadionButtons'方法观察到的，然后使用'async'管，而分配给'radioItems'财产，希望它能帮助，干杯！！ –

答

至少有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（）返回一个项目，并且（假设它的返回将是一个数组），然后确保数组在填充之前被填充。

正如在评论中提到的，通常这种类型的检查最好在使用Observable（或Promise）的打字稿组件和/或服务中实现。 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; })

你要么使用*ngIf="isLoaded"，也可以不是简单地使用一个async pipe。

有关承诺和更高级别的优秀详细使用示例，请查看this link并转至“编写您的第一个承诺”部分。

嗨，这是行不通的。 getRadioButtons（）是一个同步函数，所以在那里没有可观察的或承诺。这是一个相当复杂的功能，它会查看我的所有项目并检查某些参数。这些项目仅在返回到服务器的呼叫后才可用。我应该在这个函数中实现observables吗？如果是这样，这将如何工作？ –

对于直接的本地方法，那么承诺就足够了。我会在答案中回答一个简短的例子来说明你的申请。 –

你的代码可能是正确的，但我似乎无法让它在我的项目中工作。这可能是由于它非常复杂，我错过了给你正确的信息。请欣赏帮助。我会尽量使它与你给我的信息一起工作，可能需要重构我的代码。 –

答

为什么不在ngOnInit()中调用getRadioButtons()，然后将结果分配给[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>

加载异步数据后强制函数返回属性绑定的值

相关推荐