Не могу l oop через запрос POST JSON ответ в Angular 8 - PullRequest
Новая
       30

Не могу l oop через запрос POST JSON ответ в Angular 8

1 голос
/ 09 января 2020

Я пытаюсь l oop через JSON объект, который я получаю после выполнения запроса POST к моему REST API, но я получаю следующую ошибку: 

 DatetodateComponent.html:33 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:4377)
    at checkAndUpdateDirectiveInline (core.js:27791)
    at checkAndUpdateNodeInline (core.js:38472)
    at checkAndUpdateNode (core.js:38411)
    at debugCheckAndUpdateNode (core.js:39433)
    at debugCheckDirectivesFn (core.js:39376)
    at Object.eval [as updateDirectives] (DatetodateComponent.html:33)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
    at checkAndUpdateView (core.js:38376)
    at callViewAction (core.js:38742)

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

  1. myservice.ts 
    dateToDateStat(obj){
        return this.http.post("http://www.example.com/api/registres/datetodate", JSON.stringify(obj), this.httpOptions);
      }
component.ts 
    generateStat(){
            this.uploadService.dateToDateStat({'from' : '2019-12-01', 'to' : '2019-12-31'})
            .subscribe(
              (data)=>this.stats = data,
              (err)=>console.log(err)
            )
          }
шаблон. html 
<table class="table table-bordered">
    <tbody>
        <tr *ngFor="let ln of stats; let i = index">
          <td>{{i}}</td>
          <ng-template ngFor let-l [ngForOf]="ln" let-in="index">
            <td>{{l.mousajal}}</td>
            <td>{{l.mahkoum}}</td>
          </ng-template>
        </tr>
    </tbody>
</table>

и вот возвращаемое JSON

{
    "\u0639\u0644\u0645\u064a \u0645\u0631\u0648\u0646\u064a \u0631\u0634\u064a\u062f\u0629": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 2,
            "mahkoum": 2
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 4,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 14,
            "mahkoum": 14
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 54,
            "mahkoum": 50
        }
    },
    "\u0628\u0648\u0634\u0647\u0627\u0628 \u0627\u0644\u0635\u062f\u064a\u0642": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 1,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 1,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 4,
            "mahkoum": 10
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 2,
            "mahkoum": 11
        }
    },
    "\u0631\u0634\u064a\u062f\u064a \u062d\u0645\u064a\u062f": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 4,
            "mahkoum": 10
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 1,
            "mahkoum": 3
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 1,
            "mahkoum": 3
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 1,
            "mahkoum": 5
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 0,
            "mahkoum": 0
        }
    },
    "\u0631\u0627\u0641\u0639 \u0645\u062d\u0645\u062f\t": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 0,
            "mahkoum": 0
        }
    }
}

Ответы [ 3 ]

2 голосов
/ 09 января 2020

ng - работает только для массива. Ваш ответ не является массивом его объекта. Object.keys (yourObject) возвращает ваш массив ключей объекта.

TS 

export class AppComponent  {

  stats = {
    'id_01': {
      name: 'feyz',
      lastname: 'yild'
    },
    'id_02': {
      name: 'user2',
      lastname: 'user2'
    },
  }
  keys = Object.keys(this.stats)
  ngOnInit() {
    console.log('this.keys', this.keys)
  }
}

HTML

 <tbody>
    <tr>
      <td>key</td>
      <td>name</td>
      <td>lastname</td>
    </tr>
    <tr *ngFor="let key of keys">
      <td>{{key}}</td>
      <td>{{stats[key].name}}</td>
      <td>{{stats[key].lastname}}</td>
    </tr>
</tbody>
0 голосов
/ 10 января 2020

покопавшись еще немного, я обнаружил, что Angular 8 имеет новый канал под названием keyvalue, который позволяет перебирать объекты, используя * ngFor, и в моем случае это выглядит так: 

<tbody>
    <tr *ngFor="let ln of stats | keyvalue">
        <ng-container *ngFor="let l of ln.value | keyvalue">
            <td>{{l.value.mahkoum}}</td>
            <td>{{l.value.mousajal}}</td>
        </ng-container>
        <td>{{ln.key}}</td>
    </tr>
</tbody>
0 голосов
/ 09 января 2020

Ошибка NgFor only supports binding to Iterables such as Arrays, вероятно, относится к тому факту, что возвращенный JSON на самом деле не является массивом. Похоже, вы пытаетесь выполнить l oop с помощью ключей объекта (которые *ngFor не поддерживает.)

Одним из решений может быть обработка вашего объекта перед его подачей в html. Может быть так. 

let arr = [];


// For each object entry, 
Object.entries(obj).map(([key1, value1]) => {
  console.log('key1', key1)
  console.log('value1', value1)
    // Look inside of that entry
  Object.entries(value1).map(([key2, value2]) => {
    console.log('key2', key2)
    console.log('value2', value2)
    // Push that value into arr
    arr.push(value2)
  });

})
// This is what ends up in arr. 
console.log('end', arr)

тогда в вашем html вы можете <tr *ngFor="let ln of arr; let i = index">

вот скрипка https://jsfiddle.net/alb_17la/3em4as1j/22/

...