Блог

У меня есть веб-api, который возвращает список источников данных для данного идентификатора пользователя. Приложение angular использует этот веб-api для получения списка источников данных. Внутри метода subscribe console.log(data.length) печатается как 2 (как и ожидалось), но console.log(data[0].server); печатается как неопределенный. Я не мог понять, почему? Любая помощь была бы очень признательна. вывод postman веб-api

 [
    {
        "USERID": "user1",
        "SERVER": "localhost",
        "AUTHENTICATION": "WINDOWS",
        "DATABASE": "db1"
    },
    {
        "USERID": "user1",
        "SERVER": "localhost",
        "AUTHENTICATION": "SQL",
        "DATABASE": "db2"
    }
]
 

Класс источника данных в angular определяется следующим образом:

 export class Datasource {
userid: string;
server: string;
authentication: string;
database: string;
}
 

Обслуживание

 getDatasource():Observable<Datasource[]>{
    let userid = this._authService.name;
    let params = new HttpParams()
    params = params.set('USERID', userid);
     return this._httpClient.get<Datasource[]>(`https://localhost:8080/api/DataSources/ByUserId`, {params: params})
      .pipe(
        catchError(this.handleError)
      );
}
 

Компонент:

 import { Component, OnInit } from '@angular/core';
import { Datasource } from 'src/app/model/datasource';
import { DbService } from 'src/app/services/db.service';


@Component({
  selector: 'app-datasources',
  templateUrl: './datasources.component.html',
  styleUrls: ['./datasources.component.css']
})

export class DatasourcesComponent implements OnInit {
  constructor(private _dbService: DbService) {
   }

  ngOnInit(): void {
    
    this._dbService.getDatasource()
      .subscribe(data => {
        console.log('data length: '   data.length); //prints as 2 as expected(I have 2 records in db, so thats correct)
        //console.log(typeof(data[0])); //prints as object
        //the following output in debug window is 'undefined'?
        console.log('server[0]: '   data[0].server);
        console.log('server[1]: '   data[1].server);
      });
  }
}
 

консоль.выходное изображение журнала

Может произойти одно из двух:

1. Параметр getDatasource -Observable может возвращать значение, которое не соответствует Datasource объекту, который вы предоставляете (канал может изменить его).
2. Серверная getDatasource часть, с которой взаимодействует -Observable (для получения данных), может возвращать данные, которых вы не ожидаете.

Вот пара предложений:

1. Как предлагает @MichaelD, console.log(data) или, что еще лучше, используйте свой браузер, чтобы установить точку останова в начале функции подписки и проверить, что «возвращается».
2. Откройте средство проверки сети вашего браузера и убедитесь, что вы получаете обратно то, что ожидаете (от сервера). Если вы используете Chrome, в меню нажмите: View > Developer > Developer Tools выберите вкладку Network — и выберите ответ, который «возвращается с сервера».