angular.js - Bagaimana untuk memaparkan semula elemen item yang dilalui oleh ngfor dalam gelung dalam angular2?

Question

Data yang saya dapat: {code...} Templat saya: &lt;div&gt; {code...} Saya ingin melintasi kekunci dalam item, mendapatkan nilai yang sepadan dan menjadikannya &lt;td&gt; gelung中.Bagaimanakah saya harus menulis templat saya?

伊谢尔伦 · Answer

ng2Ini membuatkan saya sangat tidak senang ObjectPertama ialah bahagian

:


    
        {{ key }} = {{ item[key]  }}

templateBerikut ialah bahagian logik:

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

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

ComponentKaedahnya pasti berkesan, cuma cuba dan lihat sendiri

漂亮男人 · Answer

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: `
        
          
            {{key}} - {{item[key]}}
          
        
    `,
    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}
    ];
}