*ngFor使用异步管道进行本地赋值，并减少订阅数量

Question

在我编写的自定义角组件的模板文件中有类似于以下代码的代码：

<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>
    .
    .
    .

我一直在阅读这的文章，我想知道我是否可以利用页面底部讨论的*ngIf with local assignment。我读过这个：

在这里，我们创建了一个局部模板变量，该变量的角度分配来自可观测值的值。这允许我们直接与用户对象交互，而不必一遍又一遍地使用异步管道。

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

有什么想法？谢谢

更新

通过将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

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

只需如下所示创建一个名为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.ts

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

}

//item-item er.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>