1
votes

NgTemplate multiple en angulaire 7

J'ai un projet Angular 7. Et j'ai écrit et il envoie mes rowData . Quand j'ai écrit un ng-template comme ci-dessous, tout fonctionnait parfaitement. Mais, j'ai besoin de plusieurs ng-template. J'ai essayé quelque chose comme ci-dessous. Mais je ne pouvais pas exécuter. Comment puis-je y parvenir?

Cela fonctionne parfaitement

app.grid.component.html

 <app-grid>
   <ng-template let-rowData="rowData" [ngForTemplate]="templateRef">
       <button type="button" label="Delete" (click)="delete(rowData)"></button>
   </ng-template>
   <ng-template let-rowData="rowData" [ngForTemplate]="templateRef2">
       <button type="button" label="Update" (click)="update(rowData)"></button>
   </ng-template>
 </app-grid>

export class GridComponent implements OnInit {
    @ContentChild(TemplateRef) templateRef: TemplateRef<any>;
    @ContentChild(TemplateRef) templateRef2: TemplateRef<any>;
  }

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of Columns" class="ui-resizable-column">
      <span>{{rowData[col.field]}}</span>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef; context : {rowData : rowData}"></ng-template>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef2; context : {rowData : rowData}"></ng-template>
    </td>
  </tr>
</ng-template>

Mais je veux plusieurs comme ci-dessous

app.grid.component.html p >

 <app-grid>
   <ng-template let-rowData="rowData">
       <button type="button" label="Update" (click)="update(rowData)"
   </ng-template>
 </app-grid>

app.grid.component.ts

export class GridComponent implements OnInit {
    @ContentChild(TemplateRef) templateRef: TemplateRef<any>;
  }

moncomposant.html strong >

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of Columns" class="ui-resizable-column">
      <span>{{rowData[col.field]}}</span>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef; context : {rowData : rowData}"></ng-template>
    </td>
  </tr>
</ng-template>

typescript angular angular7

2 commentaires

y a-t-il une erreur dans votre console?

Ma console donne Impossible de se lier à 'ngForTemplate' car ce n'est pas une propriété connue de 'ng-template' @BearNithi

3 Réponses :

0
votes

Vous devez utiliser @ContentChildren au lieu de @ContentChild

@ContentChildren(TemplateRef) tabs: QueryList<TemplateRef>;

4 commentaires

Mais, comment je peux donner un identifiant à templateRef, si j'utilise List comme vous l'avez dit. En d'autres termes, à quel point angulaire sait quel ngtemplate écrit dans quel ngtemplate. @BearNithi.

Mais, comment je peux donner un identifiant à templateRef. en d'autres termes, comment angulaire sait quel ngtemplate écrit dans quel ngtemplat @BearNithi.

Vous pouvez y faire une boucle.

J'ajoute votre code à mon app.grid.component.ts à mon code de travail. Et j'ai changé app.grid.component.html en . Ma console donnant l'erreur templateRef.createEmbeddedView n'est pas une fonction . Et mes colonnes sont vides. @BearNithi

0
votes

Hasan Ozdemir, vous pouvez utiliser @ViewChild pour cela,

Component.ts

créez des modèles avec TemplateRef puis sélectionnez la variable de modèle dans le composant à afficher,

    <td>
      <ng-container *ngTemplateOutlet="template1; context : {rowData : rowData}"></ng-container>
    </td>
    <td>
      <ng-container *ngTemplateOutlet="template2; context : {rowData : rowData}"></ng-container>
    </td>

Modifiez votre modèle ci-dessous

 <ng-container *ngTemplateOutlet="selectedTemplate; context : {rowData : rowData}"></ng-container>


<app-grid>
   <ng-template #template1>
       <button type="button" label="Delete" (click)="delete(rowData)"></button>
   </ng-template>
   <ng-template #template2>
       <button type="button" label="Update" (click)="update(rowData)"></button>
   </ng-template>
</app-grid>

si vous souhaitez afficher plusieurs modèles à la fois, utilisez @ ViewChildren au lieu de @ViewChild . J'espère que cela vous donnera quelque chose à comprendre sur ngTemplates :)

MISE À JOUR:

vous devez définir le modèle sur selectedTemplate que vous souhaitez afficher. Mais je pense que vous devez afficher plusieurs modèles, alors apportez quelques modifications à votre fichier html. Vous pouvez donc supprimer selectedTemplate de votre composant.

 @ViewChild("template1") template1: TemplateRef<any>;
 @ViewChild("template2") template2: TemplateRef<any>;
 selectedTemplate: TemplateRef<any>;

6 commentaires

Merci @ ganesh045. Je change mes codes comme tu l'as dit. Ma console ne donne aucune erreur. Mais mes colonnes sont vides. J'ai écrit myComponent.html comme ceci. Est-ce vrai? {{rowData [col.field]}}

J'ai essayé mais ça n'a pas marché. Les colonnes sont à nouveau vides @ ganesh045

utilisez ng-container au lieu de ng-template cela fonctionnera @Hasan Ozdemir, la réponse a été mise à jour avec ng-container :)

Cela n'a pas fonctionné :) @ ganesh045. Les colonnes sont à nouveau vides

y a-t-il une raison de mettre vos modèles dans ..? Si non, supprimez-le une fois et essayez-le

Oui. C'est requis. Parce que je gère toutes les grilles de mon application à partir d'un seul composant. @ ganesh045

0
votes

J'ai trouvé la réponse. Vous pouvez voir à partir de ce lien stackblitz. (Ce stackblitz n'est pas exactement le même. Mais la logique est exactement la même.)

STACKBLITZ

0 commentaires