Comment saisir ngForOf dans le composant Angular

Cette fois, je vais vous montrer comment Angular entre ngForOf dans le composant. Quelles sont les précautions pour qu'Angular saisisse ngForOf dans le composant. . Jetons un coup d'oeil.

Maintenant, nous écrivons un composant puppiesListCmp pour afficher une liste de chiots :

//puppies-list.component.ts
@Component({
 selector: 'puppies-list',
 template: `
  <p *ngFor="let puppy of puppies">
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
  </p>
`
})
export class puppiesListCmp{
 @Input() puppies: Puppy[];
}
interface Puppy {
 name: string,
 age: number,
 color: string
}

Ensuite, utilisez-le comme ceci :

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
  <puppies-list [puppies]="puppies"></puppies-list>
`
})
export class App{
 puppies = [
  {
   name: "sam",
   age: 0.6,
   color: "yellow"
  },
  {
   name: "bingo",
   age: 1.5,
   color: "black"
  }
 ]
}

L'effet est le suivant :

Cependant, j'espère que notre composant puppiesListCmp pourra répondre à différents besoins, comme afficher les chiots uniquement si les données restent inchangées. , comme ceci :

C'est l'objet de cet article. Nous devons implémenter des modèles définis par l'utilisateur !

Maintenant, nous ne codons pas en dur le modèle de composant, mais laissons l'utilisateur saisir de l'extérieur !

Tout d'abord, notre modèle de composant :

<p *ngFor="let puppy of puppies">
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
</p>

est équivalent à :

<ng-template ngFor let-puppy [ngForOf]="puppies">
   <p>
    <span>{{puppy.name}}</span>
    <span>{{puppy.age}}</span>
    <span>{{puppy.color}}</span>
   </p>
</ng-template>

Ensuite, utilisez @ContentChild (vous pouvez vérifier ici à propos de @ContentChild, FQ est requis) pour obtenir le modèle personnalisé externe (par rapport au composant puppiesListCmp) et l'attribuer à ngForTemplate. Autrement dit, cette partie :

<p>
  <span>{{puppy.name}}</span>
  <span>{{puppy.age}}</span>
  <span>{{puppy.color}}</span>
</p>

n'est plus codée en dur dans le composant comme avant, mais est personnalisée par l'utilisateur dans le composant parent et utilise ensuite le Content Projection d'Angular, projeté dans le puppiesListCmp. composant. Comme ceci :

//puppies-list.component.ts
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
import { NgForOfContext } from '@angular/common';
@Component({
 selector: 'puppies-list',
 template: `
<ng-template ngFor let-puppy [ngForOf]="puppies" [ngForTemplate]="tpl"></ng-template>
`
})
export class puppiesListCmp{
 @Input() puppies: Puppy[];
 @ContentChild(TemplateRef) tpl: TemplateRef<NgForOfContext<Puppy>>
}
interface Puppy {
 name: string,
 age: number,
 color: string
}

De cette façon, notre composant est complet. Ensuite on l'utilise :

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
<puppies-list [puppies]="puppies">
 <ng-template let-puppy>
  <p>
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
  </p>
 </ng-template>
</puppies-list>
`
})

L'effet est toujours le même :

Si on veut seulement afficher le nom et la couleur du chiot, écrivez simplement comme ceci Ok :

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
<puppies-list [puppies]="puppies">
 <ng-template let-puppy>
  <p>
   <span>{{puppy.name}}</span>
   <span>{{puppy.color}}</span>
  </p>
 </ng-template>
</puppies-list>
`
})

L'effet est comme ceci :

Ces composants sont très flexibles et peuvent être personnalisés selon l'effet souhaité . Implémentation de la réutilisation des composants.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment publier un projet vue via le BAE de Baidu

Pourquoi la requête http axios ne peut pas être utilisée dans vue2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!