Question

下面是我的部分angular2组件模板html。＆＃34; searchTickets $＆＃34;是一个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>

我的意图是只有在observable时才会显示该表返回1条或更多条记录。

需要在* ngIf条件下修改以实现此目的。

Answer 1

正如@ xe4me所说：

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

应该工作。

<强> BUT

不要忘记async 订阅到您的observable。

这意味着：

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

和

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

将导致两个不同的订阅。

如果您在可观察链中的某个地方进行HTTP调用，则会被触发两次。

我猜这不是一个很好的选择。

相反，你应该这样做：

如果您想要处理HTML中的observable，而不是因为异步而多次触发您的observable

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

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

    // share allows you to avoid duplicate subscriptions
  }
}

如果您想处理TS中的observable

@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">

Angular2中的可观察量

2 个答案: