Дублированное значение в ngFor - PullRequest
0 голосов
/ 19 октября 2018

Я использую последнюю версию Angular, и в настоящее время я создаю массив строк, представляющих структуру объекта json, например

['id', 'address: street', 'address: zipcode', ..]

следующий фрагмент - это то, чего я достиг до сих пор

   <div *ngFor="let prop of propKeys(fetchedData)">
      <div *ngIf="checkIfObject(fetchedData[prop])">
         <span *ngFor="let subProp of propKeys(fetchedData[prop])" style="padding-left: 15px;">{{addToResult(prop + ':' +subProp)}}</span>
      </div>
      <div *ngIf="!checkIfObject(fetchedData[prop])">
         <span>{{addToResult(prop)}}</span>
     </div>
   </div>

, и это файл .ts

export class ProjectNewComponent implements OnInit {
    fetchedData: any;
    nestedResult: any[] = [];
    constructor(private _http: HttpClient) {
        this._http.get('https://jsonplaceholder.typicode.com/users')
            .subscribe((data: any) => {
               if(Array.isArray(data))
                   this.fetchedData = data[0];
               else
                   this.fetchedData = data;
               console.log(Object.keys(this.fetchedData));
            })
    }

    ngOnInit() {}

    propKeys(obj: any){
        return Object.keys(obj);
    }

    checkIfObject(item: any){
      return item instanceof Object;
    }

    addToResult(val: any){
      this.nestedResult.push(val);
      return val;
    }

    printResult(){
      console.log(this.nestedResult);
      this.nestedResult = [];
    }
}

все работает хорошо, за исключением того, что когда я нажимаю кнопку, чтобы напечатать результат, я вижу дублированный результат

['id', 'address: street', 'address: zipcode', 'id', 'address: street']

, даже если вывод html верен

Мой обходной путь - обновить функцию, заполняющую этот список

addToResult(val: any){
    if(this.nestedResult.filter(item => item === val).length === 0)
        this.nestedResult.push(val);
    return val;
}

, ноЯ не могу понять, почему массив имеет дублированные значения.Есть ли какая-то ошибка в коде?

...