Невозможно прочитать данные из службы в таблице HTML
Я использую службу для получения данных в формате JSON для моей таблицы в проекте Angular 7. Это определение услуги.
getLandingDashboardSnapshotDetails() {
return this.http.get<Snapshot[]>('<removed>');
}
Это модель моментального снимка, используемая в сервисе.
export interface Snapshot {
RequestsPendingApproval: string,
TotalApprovedRequests: string,
TotalDrafts: string,
TotalRejectedRequests: string
}
В моем файле .ts это то, что я определил.
LandingDashboardSnapshotData: Snapshot[];
ngOnInit() {
this.messageService.getLandingDashboardSnapshotDetails().subscribe(
response => {
this.LandingDashboardSnapshotData = response;
console.info(this.LandingDashboardSnapshotData)
},
errorResponse => { console.info(errorResponse) }
);
Вот как я пытаюсь отобразить данные в своей таблице.
<div class = "container">
<table class='reports'>
<tr *ngFor = "let d of LandingDashboardSnapshotData">
<th class = "reports-data">Pending for Approval : {{ d.RequestsPendingApproval }} </th>
<th class = "reports-data">Total Sent : 11</th>
<th class = "reports-data">Total Drafts : 4</th>
<th class = "reports-data"> Total Rejected : 4</th>
</tr>
</table>
</div>
Я могу видеть данные из службы с помощью console.info (). Однако, когда я пытаюсь запустить это, я получаю сообщение об ошибке: «Не удается найти другой поддерживающий объект» [object Object] »типа« object ». NgFor поддерживает привязку только к Iterables, таким как Arrays. Я не понимаю, почему я получаю сообщение об ошибке. Как еще я могу отобразить данные?
Да, я понимаю все ценности. Это выглядит так: {Запросы, ожидающие утверждения: 30, Всего черновиков: 34, Всего отклоненных запросов: 36, Всего одобренных запросов: 34}
поскольку у вас есть «{Запросы, ожидающие утверждения: 30, Всего черновиков: 34, Всего отклоненных запросов: 36, Всего одобренных запросов: 34}», это означает, что вы получили только объект ... не массив ... не можете использовать * ngFor; ... попробуйте ... {{LandingDashboardSnapshotData.RequestsPendingApproval}} {{LandingDashboardSnapshotData.TotalDrafts}} {{LandingDashboardSnapshotData.TotalRejectedRequests}} {{LandingDashboardSnapshotData.Totals }Approved результаты будут
Я пробовал. Я получил сообщение об ошибке: Не могу прочитать свойство RequestsPendingApproval из undefined
если полученные вами данные представляют собой объект, содержащий несколько массивов ... вы можете попробовать <tr * ngFor = "let d of LandingDashboardSnapshotData.RequestsPendingApproval">
Нет, он содержит только одно значение для каждого. Думаю, поэтому * ngFor не работает. Как я могу получить доступ к значению объекта?
Вы получаете ответ в виде массива или просто объекта?
Ответы 3
Кажется, что ваш this.http.get возвращает что-то другое, кроме массива.
Объявления машинописного текста предназначены только для разработки, и типы становятся недоступными, когда они переносятся в JavaScript.
Следовательно, ваш this.http.get возвращает [Object Object], но вы пытаетесь выполнить итерацию с помощью NgFor, который принимает только массивы.
Да, я только что проверил. Он возвращает объект этого формата {Запросы, ожидающие утверждения: 30, Всего черновиков: 34, Всего отклоненных запросов: 36, Всего одобренных запросов: 34. Как мне извлечь из этого значения? Я уже пробовал использовать {{LandingDashboardSnapshotData.RequestsPendingApproval}} и т. д., Но при этом я получаю сообщение об ошибке: «Не могу прочитать свойство RequestsPendingApproval» неопределенного значения.
ваши данные json содержат необычные пробелы. Requests Pending Approval: 30. поболтайте с вашим backend разработчиком :)
О нет, это просто вывод console.info (). Фактический JSON выглядит так: {«Запросы, ожидающие утверждения»: 30, «Всего черновиков»: 34, «Всего отклоненных запросов»: 36, «Всего одобренных запросов»: 34}
разве вы не видите, что на {"Requests Pending Approval":30 есть пробелы?
Я изменил это с бэкэнда. Теперь это: {"TotalRejectedRequests": 36, "TotalDrafts": 34, "TotalApprovedR equests": 34, "Request sPendingApproval": 30} Я все еще получаю сообщение об ошибке "Невозможно прочитать свойство RequestsPendingApproval" неопределенного
внесите в свой вопрос текущие правки, чтобы мы могли понять, что происходит.
@ user2978664 также добавьте свой новый json в свой вопрос.
вслед за вашим комментарием «Нет, он содержит только одно значение для каждого. Вот почему * ngFor не работает ...» попробуйте это ...
<div class = "container">
<p class='reports' *ngIf = "LandingDashboardSnapshotData">
{{ LandingDashboardSnapshotData.RequestsPendingApproval }} <br/>
{{ LandingDashboardSnapshotData.TotalRejectedRequests }} <br/>
etc...
</p>
</div>в вашем служебном файле
getLandingDashboardSnapshotDetails() {
return this.http.get<Snapshot>('<removed>');
}
а затем в вашем файле компонента замените LandingDashboardSnapshotData: Snapshot[]; на LandingDashboardSnapshotData: Array<Snapshot>;, а затем в конструкторе определите его как пустой массив, и после получения ответа от службы попробуйте вставить его в свой массив, потому что вы получаете объект, поэтому не нужно его назначать, просто нажмите его в массиве.
export class AppComponent {
LandingDashboardSnapshotData: Array<Snapshot>;
constructor(private http: HttpClient) {
this.LandingDashboardSnapshotData = [];
}
ngOnInit() {
this.getLandingDashboardSnapshotDetails().subscribe(
(response) => {
this.LandingDashboardSnapshotData = response;
console.info(this.LandingDashboardSnapshotData)
}
);
}
}
вот рабочий пример ссылка на сайт.
Это сработало для меня, но вместо this.LandingDashboardSnapshotData.push (response); Я использовал this.LandingDashboardSnapshotData = response; Изменение типа данных переменной LandingSnapshotData сработало. Спасибо за ваш ответ!
а также предложить отредактировать мой ответ, чтобы он также помог другим.
когда вы делаете "console.info (this.LandingDashboardSnapshotData)" ... вы получаете массив объектов (с несколькими значениями, верно?)?