我正在尝试将JSON对象映射到我在我的角度应用程序中配置的可观察接口,我希望一旦我将其映射,我就可以将它用作循环通过ngFor的输入。
不幸的是,我不相信我正在配置我的服务,或者可能是服务电话。
我将json对象作为单个对象返回但是ngFor没有正确地循环返回的结果,任何帮助指出我可能会忽略的内容将非常感激。
//我试图访问的接口
export interface IProduct {
name: string;
description: string;
price: number;
category: string;
image: string;
}
//服务我试图打电话
private productList = new BehaviorSubject<IProduct[]|null>(null);
productListChanges$ = this.productList.asObservable();
constructor(private http: HttpClient) { }
getProds(): Observable<IProduct[]> {
this.productList.next(null);
return this.http.get<IProduct[]>
('http://localhost:4200/assets/data/products.json')
.pipe(
tap(data => this.productList.next(data)),
);
}
//呼吁服务
productsList: IProduct[] = [];
this.productService.getProds().subscribe((response: any) => {
this.productsList = response.products[0] as IProduct[];
console.log(this.productsList);
});
//尝试使用获取对象的ngFor
<app-product *ngFor="let product of productsList" [prod]="product" ></app-product>
//来自服务调用的控制台日志输出以下内容
使用Observables循环时尝试使用异步。
<app-product *ngFor="let product of productsList | async" [prod]="product" ></app-product>
我看到你正在使用HTTP来提供JSON数据,这些数据很容易作为来自资产文件夹中存在的静态文件的数据。我会避免HTTP调用来提供这些服务。我已经重构了您的代码以提供静态数据,并且还支持使用相同服务方法的远程数据查询。它还应该在单元测试期间提供帮助,因为异步测试是一场噩梦。
// Changed the Interface to a class
export class Product {
name: string;
description: string;
price: number;
category: string;
image: string;
}
// Create a sample-data.ts file
export const ProductListData: Array<Product> = [
{
name: 'ProductName',
description: 'Description',
price: '9.99', // Maybe should be a number type and not string
category: 'Test Category',
image: 'your url for testing'
}
]
// In service...
import { of } from 'rxjs';
import { ProductListData } from './sample-data';
useSampleData = false;
getProducts(): Observable<Array<Product>> {
if (useSampleData) {
// Use this is your want to serve static JSON
return of(ProductListData); // of() turns your readily avialable object into an obeservable promise
} else {
// Get from actual HTTP as async
return this.http.get<Array<Product>>('http://localhost:4200/api/your-endpoint-url');
}
}
// In you Component...
public productList: Array<Product> = [];
this.productService.getProducts().subscribe(
productList => {
this.productsList = productList;
},
err => {
console.log('Error: ', err);
}
);
您的模板不需要更改。
正如您的控制台输出所示,productsList
是一个Object,但ngFor
需要一个Array。
如果您可以更改数据,则应该可以轻松地将其更改为数组([...]
)而不是对象({...}
)。
否则,您有几个选项可以将代码中的结构转换为数组。例如,使用Object.values()
时,您可以将当前结构转换为数组。或者,您也可以使用自Angular 6.1以来可用的KeyValuePipe。这里也回答了https://stackoverflow.com/a/51491848/9999800