Как работать с выбором шаблона в angular 6? - PullRequest
Новая
       5

Как работать с выбором шаблона в angular 6?

0 голосов
/ 12 ноября 2018

в зависимости от условия, я хочу отобразить определенный шаблон.

если "this.showTemplateOrigDestReason = true", тогда он отображает шаблон "#OriginDestinationReason" и т. Д. ... 

 changeTemplate(ruletagName) {
  
    console.log(ruletagName)
   if(ruletagName == 'OriginDestinationReason'){
     this.showTemplateOrigDestReason = true;
   }else if(ruletagName == 'inputList'){
    this.showTemplateInputList = true;
   }else{
     this.showTemplateOrigDest = true;
   }  
  }

}
<ng-template #tagDescription >
  <mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
    <mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
       {{tags.nameTag}}
    </mat-chip>
  </mat-chip-list>
</ng-template>



<ng-template #InputListTag>
 <mat-form-field fxFlex="30" >
   <h1>InputListTag</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestinationReason>
 <mat-form-field fxFlex="30" >
   <h1>OriginDestinationReason</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestination>
 <mat-form-field fxFlex="30" >
   <h1>OriginDestination</h1>
 </mat-form-field>
</ng-template>

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Одним из способов было бы просто использовать ruletagName с ngSwitch. 

<ng-container [ngSwitch]="ruletagName">
    <ng-container *ngSwitchCase="'tagDescription'"> ... </ng-container>
    <ng-container *ngSwitchCase="'OriginDestinationReason'"> ... </ng-container>
    ...
</ng-container>

Вот полный пример .

0 голосов
/ 12 ноября 2018

Попробуйте использовать директиву [ngIf], предоставленную Angular

<ng-template #InputListTag [ngIf]="showTemplateInputList">
 <mat-form-field fxFlex="30" >
   <h1>InputListTag</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestinationReason [ngIf]="showTemplateOrigDestReason">
 <mat-form-field fxFlex="30" >
   <h1>OriginDestinationReason</h1>
 </mat-form-field>
</ng-template>

<ng-template #OriginDestination [ngIf]="showTemplateOrigDest">
 <mat-form-field fxFlex="30" >
   <h1>OriginDestination</h1>
 </mat-form-field>
</ng-template>
...