Comment saisir ngForOf dans le composant Angular-js tutoriel-php.cn

Comment saisir ngForOf dans le composant Angular

php中世界最好的语言

Libérer： 2018-03-28 14:13:46

original

1447 Les gens l'ont consulté

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
}

Copier après la connexion

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"
  }
 ]
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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
}

Copier après la connexion

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>
`
})

Copier après la connexion

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>
`
})

Copier après la connexion

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!