Получение «Не удается прочитать свойство» из «неопределенного» с использованием angular 8 и httpclient - PullRequest
Новая
       29

Получение «Не удается прочитать свойство» из «неопределенного» с использованием angular 8 и httpclient

0 голосов
/ 19 сентября 2019

Я настроил свой проект с новым httpclient, используя следующую услугу.AppModule.ts настроен правильно 

getAllLocosByID(locoID: string) {
    return this.http.get<Search[]>(`${environment.apiUrl.searchbylocoid}/${locoID}`);
}

Также для поиска установлено значение 

export class Search {
    input: string;
    warningMessages: String[];
    errorMessages: String[];
    numFound: number;
    results: String[];
    APP_CODE: string;
}

на моем компоненте. У меня есть 

logoSearchResults: Search[];
constructor(private data: DataAccessService) { }    
getLocmotives() {
    this.data.getAllLocosByID('A1').subscribe((res: Search[]) => {
    // console.log(Array.of(res));
    // console.log(typeof (response));
    // this.logoSearchResults = res;
    this.logoSearchResults = { ...res };
    console.log(this.logoSearchResults);
 },
  error => {
    console.log("error");
  })
}

, что дает мне следующее наконсоль браузера.Основываясь на документах httpclient, ответным ответом уже является наблюдаемый json, который я формирую в виде Search[]

{input: "A1", warningMessages: Array(0), errorMessages: Array(0), numFound: 241, results: Array(3), …}

Пока все хорошо!но давайте поместим его в часть HTML и покажем его конечному пользователю

Я поместил кнопку в HTML, которая работает с щелчком 

<button class="btn btn-primary" (click)="getLocmotives()">
   Give me answer
</button>
{{ logoSearchResults }}

Это то, что я получаю на экране от {{ logoSearchResults }}

[object object]

путем обновления HTML-кодов для циклического перемещения по этому массиву до 

<ul class="list-group">
  {{ logoSearchResults }}
  <li class="list-group-item" *ngFor="let result of logoSearchResults">
     {{ result }}
  </li>
</ul>

Я получаю следующую ошибку 

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

При обновлении HTML-кодов до 

<ul class="list-group">
 {{ logoSearchResults }}
 <li class="list-group-item" *ngFor="let result of Array.of(logoSearchResults)">
    {{ result }}
 </li>

Я получаю следующую ошибку 

ERROR TypeError: Cannot read property 'of' of undefined

Что мне делать в HTML или угловой части, чтобы иметь возможность показывать мои данные на экране?

Ответы [ 3 ]

1 голос
/ 19 сентября 2019

Вы должны добавить массив в ngfor: * ngFor = "let result of logoSearchResults.results"

0 голосов
/ 19 сентября 2019

Проблема в этой строке this.logoSearchResults = {... res};Вы помещаете res в объект.Вы не можете зацикливаться на объекте.И я вижу, что ваша служба 

this.http.get<Search[]>

должна вернуть массив поиска, чтобы у вас было 

this.logoSearchResult=res;

И в вашем цикле измените значение на 

{{ result|json }}
0 голосов
/ 19 сентября 2019

try 

<code><pre>{{ logoSearchResults | json}}

json pipe покажет вам ваш точный JSON.

будеттакже выровняйте json так, чтобы он читался.

...