angular - Angular如何显示来自用户的包含数组的数据
问题描述
我正在研究 RecipesApp(Asp.Net MVC + Angular 作为视图)
我有包含 ICollection 食谱的用户
我想做的是:
显示来自用户的所有配方。
像这样 *ngFor 让 user.recipes 的用户
{{user.recipes}}
我已经尝试过的我的用户类:
export interface User {
id: number;
username: string;
knownAs: string;
age: number;
gender: string;
created: Date;
lastActive: Date;
photoUrl: string;
city: string;
country: string;
introduction?: string;
userPhotos?: UserPhoto[];
recipes?: Recipe[];
}
我的组件
export class MemberDetailComponent implements OnInit {
user: User;
recipes: Recipe[];
constructor(private userService: UserService, private alertify: AlertifyService, private route: ActivatedRoute) { }
ngOnInit() {
this.route.data.subscribe(data => {
this.user.recipes = data.user;
});
}
html
<div class="container">
{{user.username}}
<br>
<hr>
<p class="text-center">User Recipes: </p>
<!-- <div *ngFor="let user of user" class="col-lg-3 col-md-3 col-sm-6">
</div> -->
</div>
@编辑
我的解析器:
import {Injectable} from '@angular/core';
import { User } from '../_models/user';
import { Resolve, Router, ActivatedRouteSnapshot } from '@angular/router';
import { UserService } from '../_services/user.service';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AlertifyService } from '../_services/alertify.service';
@Injectable()
export class MemberDetailResolver implements Resolve<User> {
constructor(private userService: UserService, private router: Router, private alertify: AlertifyService) {
}
resolve(route: ActivatedRouteSnapshot): Observable<User> {
return this.userService.getUser(route.params.id).pipe(
catchError(error => {
this.alertify.error('Problem retrieving data');
this.router.navigate(['/members']);
return of(null);
})
);
}
}
食谱类
export interface Recipe {
id: number;
name: string;
ingredients: string;
preparationTime: number;
dateAdded: Date;
photoUrl: string;
description?: string;
recipePhotos?: RecipePhoto[];
}
解决方案
在你的.html中试试这个:
在你的 ts 你需要这样做:
ngOnInit() {
this.route.data.subscribe(data => {
this.user= data.user; //here change
});
}
在你的 html 中(我想 recipes 类有一个属性名称)
<div *ngFor="let recipe of user.recipes" >
<p>{{recipe.name}}</p>
</div>
推荐阅读
- android - Android WebView 仅在第一次失败
- c - 数学没有正确输出
- strapi - 将 Strapi 项目从 sqlite 迁移到 postgres
- python - Django TemplateView 从数据库的字段中获取模板
- java - 从具有访问限制的共享位置读取文件(java)
- ios - 故事板虚拟值
- c - 返回 char 字符串指针之间的差异时,强制转换和取消引用的顺序有多重要?
- java - 有没有一种简单的方法来比较二叉树的路径?
- mysql - 如何使用 ActiveRecord 忽略 MySQL 索引?
- sql - 如何在 SQL (Postgres) 中查找子字符串