Угловой - Не удается найти другой поддерживающий объект «[объект]] типа« объект ».NgFor поддерживает только привязку к итерациям, таким как массивы - PullRequest
Новая
       6

Угловой - Не удается найти другой поддерживающий объект «[объект]] типа« объект ».NgFor поддерживает только привязку к итерациям, таким как массивы

0 голосов
/ 23 ноября 2018

Я создал приложение Angular с RESTful API, аутентифицированным JWT, и я могу получить доступ к данным на странице общего профиля в приложении Angular, например, url: api, но не работает для конкретной страницы, например, url: api / 5.который аутентифицирован JWT.

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

enter image description here

мой компонент: 

getPosts() {
      this._blogPostService.list()
        .subscribe(
        // the first argument is a function which runs on success
        res => {
          this.posts = res;
      },
      // the second argument is a function which runs on error
      error => {
        console.error('Error saving');
        return throwError(error);
      },
      // the third argument is a function which runs on completion
      () => console.log('done loading!'),
    );
  }

list () здесь: 

list() { 
    return this.http.get('api/1', {
      headers:{
        'Content-Type': 'application/json',
        Authorization: 'JWT ' + this._userService.token
      }
    });
  }

мой html: 

<button (click)="getPosts()">get quote</button>
  <br><br>
<h2 class="mt-3">Student Profile Pages</h2>
      <li *ngFor="let each of posts">

        <label class="col-md-2">Student:</label>
        <div class="col-md-2 mb-1">{{ each.user.username }}</div>

        <div class="col-md-2">{{ each.user.email }}</div>
        <div class="col-md-2">{{ each.location }}</div>
        <div class="col-md-2">{{ each.about }}</div>

      </li>

мой набор данных таков: 

{
    "url": "http://127.0.0.1:8000/users/studentprofiles/5/",
    "id": 5,
    "user": {
        "url": "http://127.0.0.1:8000/users/users/7/",
        "id": 7,
        "username": "student",
        "password": "pbkdf2_sha256$120000$RGxW5X7OSwOw$hTU34GiyexDV4aT6hNQy0rHsWllnLdAm9vSohBvUqi4=",
        "first_name": "Hongzhi",
        "last_name": "Zhang",
        "email": "hongzhiz1@student.unimelb.edu.au",
        "user_type": 1,
        "is_superuser": false,
        "is_staff": false
    },
    "location": "richmond",
    "about": "this is a test",
    "phone": 3214324,
    "birthday": "1992-08-18",
    "owned_skills": [
        "http://127.0.0.1:8000/users/skills/3/"
    ],
    "chosen_interests": [
        "http://127.0.0.1:8000/users/interests/1/",
        "http://127.0.0.1:8000/users/interests/2/"
    ],
    "date_created": "2018-11-05T04:47:23.461476Z",
    "date_updated": "2018-11-15T05:07:17.456501Z",
}

Я действительно хочу знать, где что-то пошло не так.

Я также сослался на ответы в некоторых похожих вопросах, таких как: https://stackoverflow.com/a/49084550/6932409,, ноэто не работает в моем приложении.

1 Ответ

0 голосов
/ 26 ноября 2018

Проблема в CORS, есть два подхода к решению этой проблемы, один из них - добавление 'Access-Control-Allow-Origin': '*' к вашему http-запросу, иногда вам нужно добавить еще.Другой ответ - добавьте CORS_ORIGIN_WHITELIST = 'localhost:4200', в свой бэкэнд.

...