* ngFor通过异步管道进行本地分配并减少了订阅数

Question

I have code similar to the following in the template file of a custom Angular component I have written:

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

I've been reading this article and am wondering if I can take advantage of the *ngIf with local assignment discussed at the bottom of the page. I read this:

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.

On this page and was wondering if I could take advantage of this so that I do not have to keep reusing the async pipe over and over again as I feel it is drastically reducing performance on my page.

Thoughts? Thanks

UPDATE

I've been able to reduce most of the code to this fashion by wrapping ng-containers around blocks of code, for example:

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

Some of these domains have properties attached to them that are in the form of:

property: Observable.from([true]);

Anyone know what the above does?

Answer 1

Assuming that each of the domain object in the domains are subscribable entries.

Just create a component called ItemHeader as below and dumb down the subscriptions into one.

Change your html as below

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