Как получить данные в Angular 2?

Я использую почтовый метод.

Вот мой файл ts:

viewt(testid)
{
    $('#myModal22').modal('show');
    var param2 = {
        testid:testid,
    }
    this.service.get_tquestion(param2).subscribe(data => {
        this.test_question1 = data;
        console.info(data);
        console.info(this.test_question1);
    });
}

Также HTML-код:

<ng-container *ngFor = "let v of test_question1">
    <tr >
        <td>{{v.questionid}}</td>
        <td>{{v.questionname}}</td>
    </tr>
</ng-container>

И сервисная часть:

get_tquestion(param) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    // this.createAuthorizationHeader(headers);
    return this.http.post(
        this.base_url + "test/getquestion", param, {headers: headers })
        .map((res: Response) => res.json());
}

И ответ API такой:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Я получаю такой ответ:

{"Code":200,"Results":[{"questionid":1034,"questionname":"Identify the adjective in the following sentence. We carried a few sandwiches for lunch.(Hard)","duration":60}]}

Но я не могу отображать в HTML.

test_question1 - это не массив. Вот почему вы получаете эту ошибку .. Можете ли вы записать это в консоль и добавить к вопросу?
Anuradha Gunasekara 10.09.2018 11:38
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
1
45
2

Ответы 2

Вы передаете весь ответ от API переменной test_question1. Поскольку ответ - это объект, и он не является Iterable, вы не можете использовать его с директивой ngFor. Чтобы исправить это, вы можете, например, вернуть массив данных из службы:

return this.http.post(this.base_url + "test/getquestion", param, { headers: headers })
    .map((res: Response) => res.json().Results);}

или назначить свойство объекта ответа внутри подписки:

this.test_question1 = data.Results;

Получение M: res.json (...). Результаты - это не функция

Soumya Mahapatra 10.09.2018 12:13

Почему три точки внутри метода json()?

Mateusz Witkowski 10.09.2018 12:28

Вы должны попробовать это, у меня работает:

В вашем сервисе.

import { Injectable } from '@angular/core';
import { URLSearchParams, Http, HttpModule, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class AuthService {
constructor(private http: Http) { }

authenticate(user_creds)
{
  //console.info(user_creds);
  const header = new Headers();
  header.append('Content-Type', 'application/x-www-form-urlencoded');
  return this.http.post('http://localhost/valuesassessment/api/login/authenticate_login', user_creds, { headers: header })
    .map((res: Response) => res.json());
}
}

В вашем .ts:

import { AuthService } from '../auth.service';

export class LoginComponent implements OnInit {
    session_data: any = {};
constructor( private authService: AuthService ) 
{ 
  // your logic before init
}

authenticate(x)
{
    this.authService.authenticate(x)
                    .subscribe(data => 
                    {
                      if (data.ResponseCode == 411)
                      {
                        // console.info(data.ResponseCode)
                        this.session_data = data;
                      }
                      else
                      {
                        this.session_data = data;
                        // console.info(this.session_data);
                      }
                    })
    this.session.store('header',this.header);
}

Обратите внимание, что перед назначением ответа на session_data мы инициализировали его как тип any.

Надеюсь это поможет.

Другие вопросы по теме