解析完整的json文件打字稿

Question

我想在Typescript / Angular 2中查看和編輯JSON文件。但是我看不懂childs

我的JSON看起來像這樣：

{
    "site": {
        "listing":{
            "nbpage":10,
            "lengthcorps":320
        },
        "detail":{
            "sim":{
                "active":true,
                "nb":10
            }
        },
        "tri":{
            "default": {
                "type":"item",
                "sens":"item"
            },
            "options": ["options1","options2"]
        },
        "cc": {
            "nb": 0,
            "active":1
        },
        "hasreferencement":false
    }
}

我有我的界面

export interface site {
    model: string;
    listing:listing;
    detail:detail;
    contact:contact;
    tri:tri;
    cc:cc;
    hasselection?:boolean;
    hasreferencement?:boolean;
}

export interface listing {
    nbpage?:number;
    type?:number;
    lengthcorps?:number;
}
export interface detail {
    type?:number;
    sim?:sim;
    lengthcoprs?:number;
    gallery?:boolean;
}
export interface tri {
    default?:defaulttri;
    options?:string[];
}

export interface cc {
    nb?:number;
    active?:number;
}
export interface sim{
    active?:boolean;
    nb?:number;
}

export interface defaulttri{
    type?:string;
    sens?:string;
}

一切工作正常，但是現在我想打印/修改模板上的所有屬性，這是我的小問題

        <ul *ngFor="let item of uploadFile.site | JsonPipe3; let i=index">
          <li>{{ item.key }} => {{item.value }}</li>   
        </ul>

export class JsonPipe3 implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    let keys2 =[];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
      /*
      if(this.isAnyObject(value[key])){
        for (let key2 in value[key]) {
          keys2.push({key: key2, value:value[key2]});
        }
      }
      */

    }
    //return [keys,keys2];
    return keys;
  }
  isAnyObject(value) {
    return value != null && (typeof value === 'object' || typeof value === 'function');
  } 
}

我只能讀取屬性的第一個子級，例如““ hasreferencement”：false“，否則我有[Object Object]在我的管道上，我嘗試測試第二個子級是否存在對象，但它不能正常工作，如果我有第三個子級孩子，我只能用這個想法讀第二篇

我希望有人可以幫助我^^謝謝

Answer 1

之所以得到[Object Object]是因為對綁定到視圖的每個值進行toString()角調用，而對象的toString()是JS，則返回[Object Object] （如果未重寫）。

您的評論是否幾乎正確，請嘗試此

transform(value, args:string[]) : any {
    let keys = [];
    let keys2 =[];
    for (let key in value) {
      if(this.isAnyObject(value[key])){
        for (let key2 in value[key]) {
          keys2.push({key: key2, value:value[key][key2]});// <-- instead of value:value[key2]
        }
      } else {
          keys.push({key: key, value: value[key]});
      }
    }
    return keys.concat(keys2); // <-- instead of [keys, keys2]
  }