javascript - *ngFor 使用异步管道进行本地分配并减少订阅数量

Question

我编写的自定义 Angular 组件的模板文件中有类似于以下内容的代码:

<item
    [class.disabled]="domain?.disabled | async"
    [class.hidden]="!(domain?.subscribed | async) && !showHiddenDomains || (domain?.deleted | async)"
    [disabled]="domain?.disabled | async"
    [hideHealth]="true"
    *ngFor="let domain of (forest?.domains | async)"
    [status]="domain?.status | async"
    (expand)="collapseDomain($event, domain)">
    <span header>
        <div [class.container-disabled]="!(domain?.disabled | async) && !(domain?.iconType | async)">
            <spinner-2 [promise]="spinnerPromise" *ngIf="domain?.disabled | async"></spinner-2>
            <font-icon class="domain-header-icon-{{domain?.statusString | async}}" [type]="domain?.iconType | async" *ngIf="!(domain?.disabled | async)"></font-icon>
        </div>
        <div>{{domain.name}}</div>
    </span>
    .
    .
    .

我一直在阅读this文章，我想知道我是否可以利用页面底部讨论的带有本地分配的 *ngIf 。我读到了这个:

Here we are creating a local template variable that Angular assigns the value from the Observable. This allows us to interact directly with our user Object without having to use the async pipe over and over.

关于this页面，想知道是否可以利用这一点，这样我就不必一遍又一遍地重复使用异步管道，因为我觉得它大大降低了我页面的性能。

想法？谢谢

更新

通过将 ng-containers 包裹在代码块上，我已经能够以这种方式减少大部分代码，例如:

<ng-container *ngIf="forest?.domains | async as domains">
    <div *ngFor="let domain of domains">
        .
        .  
        .
    </div>
</ng-container>

其中一些域附加了以下形式的属性:

property: Observable.from([true]);

有人知道上面的作用是什么吗？

Answer 1

假设domains中的每个domain对象都是可订阅的条目。

只需创建一个名为 ItemHeader 的组件，如下所示，并将订阅简化为一个。

如下更改您的 html

<item
    [class.disabled]="domain?.disabled | async"
    [class.hidden]="!(domain?.subscribed | async) && !showHiddenDomains || (domain?.deleted | async)"
    [disabled]="domain?.disabled | async"
    [hideHealth]="true"
    *ngFor="let domain of (forest?.domains | async)"
    [status]="domain?.status | async"
    (expand)="collapseDomain($event, domain)">
    <item-header [domain]="domain | async"></item-header>
    .
    .
    .

//item-header.component.ts

@Component({
  selector: 'item-header',
  templateUrl: './item-header.component.html'
})
export class ItemHeaderComponent implements OnInit {
 @Input() domain: Domain 
 constructor(){}

}

//item-header.component.html

<span header>
        <div [class.container-disabled]="!(domain?.disabled | async) && !(domain?.iconType | async)">
            <spinner-2 [promise]="spinnerPromise" *ngIf="domain?.disabled | async"></spinner-2>
            <font-icon class="domain-header-icon-{{domain?.statusString | async}}" [type]="domain?.iconType | async" *ngIf="!(domain?.disabled)"></font-icon>
        </div>
        <div>{{domain.name}}</div>
    </span>