Question

我正在从事角度应用。我能够显示列表中的女巫具有关键价值参见示例

class Timer extends Component {
    constructor(props){
        super(props); 

        this.state = {
            hours: "",
            minutes: "",
            seconds: "",
            timeToCountdown: ""   
        };

        this.grabHours = this.grabHours.bind(this);
        this.grabMinutes = this.grabMinutes.bind(this);
        this.grabSeconds = this.grabSeconds.bind(this);
        this.changeAllTimeInputsToSeconds = this.changeAllTimeInputsToSeconds.bind(this);
    }

   changeAllTimeInputsToSeconds(){
        var timerHours = Number((parseInt(this.hours.value, 10)*3600)) || 0
        var timerMinutes = Number((parseInt(this.minutes.value, 10)*60)) || 0
        var timerSeconds = Number(parseInt(this.seconds.value, 10)) || 0

        var allTimeInSeconds = timerHours + timerMinutes + timerSeconds;       

        this.setState({timeToCountDownValue: this.allTimeInSeconds});

        console.log(allTimeInSeconds);

        return allTimeInSeconds;
    }

当键和数组均为动态时如何显示列表例如我想显示 list = [{{key1：“ fd”，key2：“ fdf”}]

在html页面中，我不知道键1或键2是什么，它将动态变化或每次键变化时如何打印 {{array.unkhownkey}

我还有另一种解决方法
如何合并，如果我将得到2个不同的列表中的键和不同列表中的列表例如 {{array}}。{{key}}

Answer 1

您可以创建一个管道，并可以将其注入* ngFor html。

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

@Pipe({
  name: 'forArrayProp'
})
export class ForArrayProp implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

然后使用模板：

<div *ngFor="let property of response">
    <div *ngFor="let itemkey of property | forArrayProp">
         {{property[itemkey]}}
    </div>
</div>

Answer 2

使用管道

<div *ngFor="let list of lists" [(ngModel)]="lists" >
    <ion-item *ngFor="let key of list | keys" >
        <ion-row>
            <ion-col col-7 class="title">
                {{key}}: {{c[key]}}
            </ion-col>
       </ion-row>
    </ion-item>
</div>

ts

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

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }
}

HTML表单中的键未知时如何获取动态列表

2 个答案: