Angular2 如何解決非同步的問題

General
1

大家好，小弟我目前遇到一個問題是
我使用http.get方式傳送之後
然後在 subscribe 的時候將資料傳給data 陣列
並在前端透過 *ngFor 將資料讀出來

可是現在問題是html會優先載入，所以導致我的data陣列這時候還沒response 回來
因此內容都是空的

不知道該如何解決這問題呢？

以下是我的Code:

Service：
 
class CaresysService {
 
  constructor(private http: Http) { }
 
    public GetMemberData (Account: string)
    {
     return  this.http.get('http://hplus.ys3s.com/api/Care/GetCareData?Account=' + Account)
                      .map(res=>res.json());
    }

TypeScript:
class CareSystemComponent implements OnInit {
 
  constructor(private Caresys: CaresysService) { }
 
  Members : Patient[];
 
  ngOnInit() {
 
    this.Caresys.GetMemberData(localStorage.getItem('account'))
                .subscribe((data) => this.Members = data);
  }

Component:
 <tbody *ngFor="let member of Members">
 
            <tr>
               <td style="font-size: 15px;">{{member.Id}}</td>
              <td style="font-size:  15px;">{{member.Name}} </td>
              <td style="font-size:  15px;">{{member.Heigh}}cm</td>
              <td style="font-size:  15px;">{{member.Weigh}}kg</td>
              <td>
                <a class="button site" [routerLink]="['../self-management']"> <i class="icon fa fa-pencil-square-o font"></i></a>
              </td>
            </tr>
2

用*ngIf判斷，先顯示一個等待內容／等待動畫，應該是比較介面友善的做法。

3

因為不太了解你想怎麼解決，如果是想在 Component 載入後、資料下載完成之前，在 Component 內增加 Loading 提示，應該可以參考這個寫法: http://blog.kevinyang.net/2017/04/19/angular-ngIf-else/#more

以下為擷取:

<div>
  <strong>UserName:</strong>
    <span *ngIf="user|async as _user; else elseTmpl">
    	{{ _user.name }}
    </span>
    <ng-template #elseTmpl>
      loading user...
    </ng-template>
</div>
4

如果有使用 Route 的話，可以利用 resolve 的方式，將資料先讀取完後，才會顯示畫面。
但如果你的 service 需要跑很久，就不太建議這樣子做。
讓使用者先看到畫面，然後有一個 loading 的畫面，至少讓人感覺系統有再跑

2個讚