Angular 6: получить массив объектов из соответствующего JSON через httpClient - PullRequest
Новая
       15

Angular 6: получить массив объектов из соответствующего JSON через httpClient

0 голосов
/ 05 июня 2018

Я пытаюсь заполнить таблицу данными из моего внутреннего API.Таблица ожидает ввода rows, представляющего собой массив объектов, каждый из которых представляет строку в таблице и состоит из пар столбец-имя / значение.Внутренний сервер публикует массив объектов JSON, например:

[{"column1":"val1","column2":"val2"},{"column1":"valA","column2":"valB"}]

Если я просто скопирую и вставлю эту строку в мой файл .ts и назначу ее непосредственно свойству row, все будет работатьправильно: 

this.rows = [{"column1":"val1","column2":"val2"},{"column1":"valA","column2":"valB"}]

Это работает независимо от того, определено ли свойство rows как any или Array<DataObject> или что-то промежуточное.Так почему же я не могу добиться такой же функциональности через httpClient?

Вот что у меня есть:

data-service.service.ts: 

@Injectable()
export class DataService {

    constructor (private http: HttpClient) {}

    public getData() {
        return this.http.get<Array<DataObject>>(apiURL, {responseType : 'json'});
    }

table-view.route.ts: 

export class TableView implements OnInit {

    rows: Array<DataObject>;

    constructor(dataService: DataService) {
        dataService.getData()
                   .subscribe((result: Array<DataObject>) => this.rows = result)
    }
}

data-object.ts 

export interface DataObject {
    column1: string;
    column2: string;
}

Кажется, что данные правильно загружаются, но они введены неверно или добавлены в дополнительныйобъект или что-то и таблица не может прочитать это.Нет ошибок;просто пустой столИнтересно, что я добавил это в свой html перед объявлением таблицы, просто чтобы убедиться, что мои данные проходили: 

<div>{{rows[0].column1}}</div>

Это правильно выводит «val1», И это внезапно заполняет таблицу ВСЕМИ данными.Меняет ли этот доступ каким-либо образом тип rows на то, что компонент таблицы может понять?

Я пробовал всевозможные варианты приведенного выше кода с проверкой типов и без нее;Я попытался удалить заголовок содержимого json, прочитав его в виде открытого текста, а затем JSON.parse().Я понимаю, что мог бы просто пройтись по массиву, создать экземпляр DataObject s и сопоставить поля по отдельности, прежде чем помещать их в rows, но должен быть более простой способ сделать это, верно ...?Любой толчок в правильном направлении приветствуется.

1 Ответ

0 голосов
/ 05 июня 2018

Я полагаю, это потому, что this.rows = result не обернуто в {}.Можете ли вы выйти из своей подписки, чтобы убедиться, что она действительно возвращается? 

dataService.getData()
.subscribe(
  (result: Array<DataObject>) => { 
    console.log('success', result);
    this.rows = result
  },
  (error: any) => { 
    console.log('error', error);
  }
)

Я бы также предложил перенести этот вызов в NgOnInit, а не в конструктор.

...