Angular: Использовать ngSwitch для String включает?

Question

Я пишу много операторов ngIf, рендеринг HTML-формы, когда поиск описания продукта содержит ключевое слово.

Как мне преобразовать это в ngSwitch?

Текущий ngIfоператор

<app-store *ngIf="message?.productDescription.includes('Cars')">
     <app-carform></app-carform>
</app-store>
<app-store *ngIf="message?.productDescription.includes('Reading')">
     <app-bookform></app-bookform>
</app-store>
<app-store *ngIf="message?.productDescription.includes('Furniture')">
     <app-homefurnitureform></app-homefurnitureform>
</app-store>

Пример ngSwitch:

Я читаю Примеры операторов Ngswitch, но не знаю, как преобразовать приведенное выше, если это возможнов угловых.

<div [ngSwitch]="productDescription">
  <p *ngSwitchCase="'Cars'"><app-carform></app-carform></p>
  <p *ngSwitchCase="'Reading'"><app-bookform></app-bookform></p>
  <p *ngSwitchCase="'Furniture'"><app-homefurnitureform></app-homefurnitureform></p>
</span>

Answer 1

Я только что прочитал кое-что о пользовательских трюках условия ngSwitch, можете ли вы попробовать что-то подобное:

<div [ngSwitch]="true">
    <app-carform *ngSwitchCase="message?.productDescription.includes('Cars')"></app-carform>
    <app-bookform *ngSwitchCase="message?.productDescription.includes('Reading')"></app-bookform>
    <app-homefurnitureform *ngSwitchCase="message?.productDescription.includes('Cars')"></app-homefurnitureform>
</div>

источник: https://stackoverflow.com/a/45950368/8597732

Answer 2

создать функцию для вашего коммутатора, для читаемого и чистого кода.

public  mySelection(selection: string): string {
    switch (selection) {
       case 'gf':
           return 'Gluten-free';
        default:
           return 'Standard';
    }
}

В вашем HTML

<div>
  <p >{{ mySelection('dietSelection') }}</p>
</span>