Попытка получить данные с сервера с помощью get и попытка использовать их в раскрывающемся списке компонента Angular

Question

Я пытался перебрать Object, используя *ngFor, но это не сработало. Затем я попытался выполнить итерацию, взяв массив под объект, данные были показаны, как и ожидалось, но в консоли я все еще вижу ошибку:

Невозможно прочитать свойство 'Types' из неопределенного

Пожалуйста, помогите мне в этом.

TS

ngOnInit(): void {

    this.http
      .get('http://localhost:3000/api/types')
      .pipe(
        map(responseData => {

          return responseData;
        })
      )
      .subscribe(posts => {
        // ...
        this.types = posts;
        console.log(posts);
      });
  }

HTML

<div class="select-list">
    <label for="Type" class="required" >Type</label>
       <select   name="Type"  id="Type" placeholder = "Select a Type" [(ngModel)] = "type">
          <option *ngFor = "let opptype of types.Types">{{ opptype.type }}</option>
       </select>
</div>

Объект получен с помощью get

Object
Types: Array(4)
0: {_id: "5eaeecf8fea39a54d4f4eddd", type: "New"}
1: {_id: "5eaeed37fea39a54d4f4ee01", type: "Pending"}
2: {_id: "5eaeed48fea39a54d4f4ee12", type: "Approved"}
3: {_id: "5eaeed64fea39a54d4f4ee28", type: "Rejected"}
length: 4
__proto__: Array(0)
message: "Types fetched successfully!"
__proto__: Object

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

Answer 1

Root причина проблемы: представление визуализируется до того, как ваш API может заполнить переменную типов, а между тем, поскольку API не возвращает ваши типы, переменная 'types', похоже, устанавливается как неопределенная.

Есть 2 сценария ios, которые, как я вижу, могут решить эту проблему:

1. Когда вы объявляете переменную типов в вашем компоненте, инициализируйте ее в пустой массив.

   this.types = [];
   

2. Объявите переменную типов как Observable и скорее используйте асинхронный c канал в представлении. Таким образом, Angular будет знать, что он должен ожидать асинхронные данные для этой переменной, и вы можете избежать этой ошибки, то есть IE будет ждать, пока API заполнит переменную.

TS

    types: Observable<any>;

    ngOnInit() {
    this.types = this.http
      .get('http://localhost:3000/api/types')
      .pipe(
        map(responseData => {

          return responseData;
         })
      );
     }

HTML

<div class="select-list">
<label for="Type" class="required" >Type</label>
   <select   name="Type"  id="Type" placeholder = "Select a Type" [(ngModel)] = "type">
      <option *ngFor = "let opptype of types.Types | async">{{ opptype.type }}</option>
   </select>

Answer 2

Я думаю, что ваша ошибка в ts .. пожалуйста, измените this.types = posts; to this.types = posts.Types;

, потому что данные находятся в массиве 'Types'.

ngOnInit(): void {

    this.http
      .get('http://localhost:3000/api/types')
      .pipe(
        map(responseData => {

          return responseData;
        })
      )
      .subscribe(posts => {
        // ...
        this.types = posts.Types;
        console.log(this.types);
      });
  }

Answer 3

Пожалуйста, измените html на

<div class="select-list">
    <label for="Type" class="required" >Type</label>
       <select   name="Type"  id="Type" placeholder = "Select a Type" [(ngModel)] = "type">
          <option *ngFor = "let opptype of types?.Types">{{ opptype.type }}</option>
       </select>
</div>

, теперь он будет проверять .Types, только если есть данные в types

Answer 4

Это потому, что за время обработки вашей страницы данные еще не были получены. Лучше всего использовать asyn c.

В вашем файле TS:

export interface Types {
    _id: string,
    Type: string
}
...
public types Observable<Types[]>;

ngOnInit(): void {
this.types = this.http.get<Types[]>(‘http://localhost:3000/api/types');
}

В вашем файле шаблона:

<option *ngFor = "let opptype of types | async">{{ opptype.type }}</option>