Как я могу сослаться на шаблон ng, используя строку? - PullRequest
0 голосов
/ 19 февраля 2020

В моем компоненте angular есть следующее. html file:

<nz-collapse *ngFor="let optimization of optimizations; trackBy: trackByTip">
  <nz-collapse-panel [nzHeader]="header" [nzExtra]="optimization.type">
    <ng-template #header>
    </ng-template>
    <ng-template #HAS_TOO_FEW>
    </ng-template>
  </nz-collapse-panel>
</nz-collapse>

Значение optimization.type в этом случае является строкой. Поскольку я прохожу oop через каждый элемент (optimization), я хочу, чтобы соответствующий шаблон, если таковой имеется, имел ссылку. В этом случае optimization.type возвращает строку "HAS_TOO_FEW", которая должна ссылаться на шаблон #HAS_TOO_FEW. Как я могу получить строку для ссылки на шаблон таким образом?

Обратите внимание, что если шаблон не существует для соответствующего optimization.type, я хочу, чтобы значение было эффективно [nzExtra]="null".

Я очень новичок в Angular, поэтому, если весь мой подход неверен или идиоматизм c, предложите другой подход. Спасибо.

1 Ответ

2 голосов
/ 19 февраля 2020

Вы можете использовать NgSwitch для выбора различных шаблонов на основе значения optimization.type.

. Если вы поместите весь этот блок NgSwitch в блок <ng-template>, вы можете передать его в качестве входных данных TemplateRef.

<nz-collapse *ngFor="let optimization of optimizations; trackBy: trackByTip">
    <nz-collapse-panel [nzHeader]="header" [nzExtra]="optimizationTypeTemplate">

        <ng-template #header>
        </ng-template>

        <ng-template #optimizationTypeTemplate>
            <ng-container [ngSwitch]="optimization.type">
                <ng-container *ngSwitchCase="'HAS_TOO_FEW'">
                    Too few!!
                </ng-container>
                <ng-container *ngSwitchCase="'HAS_TOO_MANY'">
                    Too many!!
                </ng-container>
                <ng-container *ngSwitchDefault>
                    This is the null case
                </ng-container>
            </ng-container>
        </ng-template>

    </nz-collapse-panel>
</nz-collapse>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...