Angular2中的可觀察對象

Question

以下是我的部分angular2組件模板html。 “ searchTickets $”是對象數組的Observable。

<table class="table table-condensed" *ngIf="searchTickets$">
<thead>
    <tr>
        <th><h3>Ticket ID</h3></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let ticket of searchTickets$  | async">
        <td><small>{{ticket.ticketID}}</small></td>     
    </tr>
</tbody>
</table>

我的意圖是僅在可觀察到的返回1個或更多記錄時才顯示該表。

需要在* ngIf條件中進行修改才能使其實現。

Answer 1

正如@ xe4me所說：

<table class="table table-condensed" *ngIf="(searchTickets$ | async)?.length">

應該管用。

但

不要忘記異步正在訂閱您的可觀察對象。

這意味着具有：

<table class="table table-condensed" *ngIf="searchTickets$">

和

<tr *ngFor="let ticket of searchTickets$  | async">

將導致兩個不同的訂閱。

如果您在可觀察鏈中的某個位置進行HTTP調用，它將被觸發兩次。

我猜這不是一個很好的選擇。

相反，您應該這樣做：

---

如果您想處理HTML中的可觀察對象而又不會由於異步觸發而多次觸發可觀察對象

@Component({
  ...
})
export class YourComponent {
  public searchTickets: any;

  constructor(private yourService: any) {
    this.searchTickets = yourService
      .getSearchTicket()
      .share();

    // share allows you to avoid duplicate subscriptions
  }
}

---

如果您想處理TS中的可觀察物

@Component({
  ...
})
export class YourComponent implements OnDestroy {
  public searchTickets: any;
  private searchTicketsSub: Subscription;

  constructor(private yourService: any) {
    this.searchTickets =
      // let say you have the observable coming from a service that
      // makes an HTTP call 
      yourService
        .getSearchTicket()
        .subscribe((searchTickets: any) => this.searchTickets = searchTickets);
  }

  ngOnDestroy() {
    // then, don't forget to unsubscribe
    this.userSub.unsubscribe();
  }
}

Answer 2

你應該試試

<table class="table table-condensed" *ngIf="(searchTickets$ | async)?.length > 0">