Angular2 使用管道获取非常深的嵌套 json 值！ *ngFor

Question

您好，我在获取 json 值时遇到问题，该值是使用管道深度嵌套的。

我做错了什么？

我正在使用的管道

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

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

Json 我正在从服务器获取。

data:
  0: {
    Profile: { ...
    }
    BasicInfo: { ...
    }
    introduceInfo: {
      curriculum: { ...
      }
      experience: {
        0: {
          category: "Mentor"
          year: "2011"
          duration: "24"
        }
        1: {
          category: "Student"
          year: "2011"
          duration: "14"
        }
      }
    }
  }

它实际上是一个巨大的 json 对象，但我已经简化为只显示我需要得到的东西。

我想获取类别的值（即"Mentor"和"Student"。

为此，我在 html

中进行了尝试

<div *ngFor="let detail of teaInfo | keyValues">
  <div *ngFor="let experience of detail.value['introduceInfo'] | keyValues">
    <div *ngFor="let exp of experience.value['experience'] | keyValues">
      <p class="fontstyle2">{{exp.value['category']}} {{exp.value['year']}}년 | {{ex.value['duration']}}개월</p>
    </div>
  </div>
</div>

然后我在我的组件中得到我的 json 对象，就像这样。

teaInfo: any[];
getTeacherDetail(): void {
  let params = new URLSearchParams();
  params.set('gradeType', `${this.getVal2()}`)
  params.set('subjectType', `${this.getVal3()}`)
  params.set('district', `${this.getVal1()}`)

  this.teaDetail.getTeachersDetail(params)
    .subscribe(
      teaInfo => this.teaInfo = teaInfo,
      error => this.errorMessage = error
    )
}

结果是我一无所获

我做错了什么？

Answer 1

试图解释你的 JSON 看起来像这样：

{
  "data":{
    "0": {
      "Profile":{
        "prof":"prof"
      },
      "BasicInfo":{
        "basic":"basic"
      },
      "introduceInfo":{
        "curriculum": {
          "curr":"curr"
        },
        "experience":{
          "0":{
            "category":"Mentor",
            "year":"2011",
            "duration":"24"
          },
          "1":{
            "category":"Student",
            "year":"2011",
            "duration":"14"            
          }
        }
      }
    }
  }
}

在下面的示例中，我从 data 中提取了值，因此：

.map(res => res.json().data)

要达到值 Mentor 和 Student，首先将管道更改为：

export class KeysPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

并将您的 HTML 更改为：

<div *ngFor="let detail of teaInfo | keyValues">
 <div *ngFor="let experience of detail['introduceInfo']['experience'] | keyValues">
    {{experience.category}}
 </div>
</div>

这应该很好用：

Angular2 使用管道获取非常深的嵌套 json 值！ *ngFor

Angular2 Getting very deep nested json value using pipe! *ngFor

json

ngfor

angular

Demo