angulaire.js - Comment restituer les éléments d'élément traversés par ngfor dans une boucle dans angulaire2?

Question

Les données que j'ai obtenues :

    var items=[
        { "version": "1", "theme": "Windstorm" ,"age":20},
        { "version": "2", "theme": "Bombasto","age":21},
        { "version": "3", "theme": "Magneta" ,"age":22},
        { "version": "4", "theme": "Tornado" ,"age":23}
    ];
    
    

Mon modèle :

<p>

<p>
      <tr *ngFor="let item of items">
        <td *ngFor="怎么写">怎么写</td>
      </tr>
</p>
</p>

Je souhaite parcourir les clés de l'élément, obtenir la valeur correspondante et la restituer dans l'élément <td> en boucle. Comment dois-je écrire mon modèle ?

...

Answer 1

ng2Cela me rend très mécontent. Cela ne peut pas être parcouru naturellement Object Nous ne pouvons l'écrire que nous-mêmes. Afin de ne pas vous confondre, j'utilise la manière la plus simple de jouer,

.

La première est la partie template :

<tr *ngFor="let item of items">
    <td *ngFor="let key of getKeys(item)">
        {{ key }} = {{ item[key]  }}
    </td>
</tr>

Ce qui suit est la Component partie logique :

@Component({
  selector: 'test',
  templateUrl: 'template.html',
  styleUrls:  ['style.css']
})
export class ItemsComponent {

    //关键就是这个getKeys方法，得自己写，真他妈的
    getKeys(item){
        return Object.keys(item);
    }
}

La méthode fonctionne vraiment, essayez-la et voyez par vous-même

Answer 2

keys.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
    transform(value: any, args: string[]): string[] {
        if (typeof(value) !== 'object')
            throw 'keysPipe value must be object';

        return Object.keys(value);
    }
}

app.component.ts

import { Component } from '@angular/core';
import { KeysPipe } from './keys.pipe';

@Component({
    selector: 'app',
    template: `
        <table>
          <tr *ngFor="let item of items">
            <td *ngFor="let key of item | keys">{{key}} - {{item[key]}}</td>
          </tr>
        </table>
    `,
    pipes: [KeysPipe]
})
export class AppComponent {
    items = [
        {'version': '1', 'theme': 'Windstorm', 'age': 20},
        {'version': '2', 'theme': 'Bombasto', 'age': 21},
        {'version': '3', 'theme': 'Magneta', 'age': 22},
        {'version': '4', 'theme': 'Tornado', 'age': 23}
    ];
}