#angular #angular-material
Вопрос:
Мой rest Api возвращает { «идентификатор»: 1, «Идентификатор пользователя»: 1, «дата»: «2020-03-02T00:00:02.000 Z», «продукты»: [ { «Идентификатор продукта»: 1, «количество»: 4 }, { «Идентификатор продукта»: 2, «количество»: 1 }, { «Идентификатор продукта»: 3, «количество»: 6 } ], «__v»: 0 } и я пытаюсь реализовать таблицу угловых материалов, в которой отображается корзина пользователя, выбранного другой таблицей. Я создаю модуль материалов, сервис и интерфейс… Кто-нибудь может помочь мне понять, в чем причина ошибки здесь? Я всегда получаю эту ошибку в консоли: предоставленный источник данных не соответствует массиву, наблюдаемому или источнику данных.
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Cart } from '../interfaces/cart'; import { CartsService } from '../services/carts.service'; @Component({ selector: 'app-user-cart', templateUrl: './user-cart.component.html', styleUrls: ['./user-cart.component.css'] }) export class UserCartComponent implements OnInit { carts!: Cart[]; displayedColumns: string[] = ['id','userId', 'date', 'products-id', 'products-quantity']; constructor( private cartsService: CartsService, private route: ActivatedRoute ) { } ngOnInit(): void { this.route.params.subscribe(response =gt; this.cartsService.getCart(response.id) .subscribe(response =gt; this.carts = response) ); } } lt;table mat-table [dataSource]="carts" class="mat-elevation-z8"gt; lt;ng-container matColumnDef="id"gt; lt;th mat-header-cell *matHeaderCellDefgt; Id lt;/thgt; lt;td mat-cell *matCellDef="let cart"gt; {{cart.id}} lt;/tdgt; lt;/ng-containergt; lt;ng-container matColumnDef="userId"gt; lt;th mat-header-cell *matHeaderCellDefgt; User Id lt;/thgt; lt;td mat-cell *matCellDef="let cart"gt; {{cart.userId}} lt;/tdgt; lt;/ng-containergt; lt;ng-container matColumnDef="date"gt; lt;th mat-header-cell *matHeaderCellDefgt; Date lt;/thgt; lt;td mat-cell *matCellDef="let cart"gt; {{cart.date}} lt;/tdgt; lt;/ng-containergt; lt;ng-container matColumnDef="products-id"gt; lt;th mat-header-cell *matHeaderCellDefgt; Product Id lt;/thgt; lt;td mat-cell *matCellDef="let row"gt; lt;span *ngFor="let item of row.products"gt;{{item.productId}}lt;/spangt; lt;/tdgt; lt;/ng-containergt; lt;ng-container matColumnDef="products-quantity"gt; lt;th mat-header-cell *matHeaderCellDefgt; Quantity lt;/thgt; lt;td mat-cell *matCellDef="let row"gt; lt;span *ngFor="let item of row.products"gt;{{item.quantity}}lt;/spangt; lt;/tdgt; lt;/ng-containergt; lt;tr mat-header-row *matHeaderRowDef="displayedColumns"gt;lt;/trgt; lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"gt; lt;/trgt; lt;/tablegt; export interface Cart { id: number, userId: number, date: string, products: Arraylt;{productId: number, quantity: number}gt;, __v: number } Комментарии:
1.Можете ли вы попробовать кастинг в качестве
Cart[].subscribe(response =gt; this.carts = response as Cart[])
Ответ №1:
Не уверен, что это может решить вашу проблему, но я не думаю, что в вашем источнике данных требуется список.
Я бы посоветовал вам попробовать заменить:
carts!: Cart[]; Автор: :
public carts: MatTableDataSourcelt;Cartgt;; с соответствующим импортом, конечно: import { MatTableDataSource } from '@angular/material/table';
Ответ №2:
Инициализируйте корзину источников данных, как показано ниже
carts = MatTableDataSourcelt;Cart[]gt;; импорт { MatTableDataSource } из ‘@угловой/материал/таблица’;