加載異步數據後強制函數返回屬性綁定的值

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

所以我有這個角度2組件<cv-radio-button-group>這是一個自定義的單選按鈕組。單選按鈕的數量由屬性[radioItems]確定。這一切都將在同步環境中運行。加載異步數據後強制函數返回屬性綁定的值

但現在我正在實施它與項目調用服務器，現在它在異步環境。因此，在啓動時調用getRadionButtons()函數，這對服務器的調用仍在做它的事情。而getRadiobuttons()需要來自服務器的數據來返回正確數量的單選按鈕，所以我沒有得到正確的結果。

我可以強制它通過點擊其他地方，並點擊返回，迫使ngOnInit（）運行。

有沒有辦法強制函數在異步數據完成時再次返回它？

來源

2017-09-05 Martijn van den Bergh

可以返回一個承諾或從你的'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並轉至「編寫您的第一個承諾」部分。

來源

2017-09-05 13:21:41

嗨，這是行不通的。 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>

來源

2017-09-05 14:16:51

加載異步數據後強制函數返回屬性綁定的值

回答

相關問題