为 PrimeNG Table 格式化 Angular 可观察数据
Format Angular observable data for PrimeNG Table
我有一个基于 Angular.io 教程的项目,包括“Hero”-接口和数据,以及一个使用 HTTPClient 的“HeroService”。
我能够在模板中使用标准 HTML 获取数据并显示它,但在使用 PrimeNG table 时不能,使用他们网页中的示例。所以我有模板所需的数据,但我不确定如何将其正确传递给 PrimeNG。我希望在不改变 HeroSerice 工作方式的情况下做到这一点。
我通常对 Observables、Promises 和相关技术感到困惑,因此很难进一步描述。我已阅读 Using PrimeNG with Observables (rxjs) in Angular 4,但没有解决我的问题。
英雄界面:
export interface Hero {
id: number;
name: string;
}
InMemoryDataService:
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const heroes = [
{ id: 11, name: 'Dr Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
return {heroes};
}
来自 HeroService 的方法:
/** GET heroes from the server */
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
catchError(this.handleError<Hero[]>('getHeroes', []))
);
}
我的 TreeTableComponent:(在我将其缩小为 table 之前命名)
export class TreeTableComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService : HeroService) { }
ngOnInit() {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes().pipe(tap(heros => console.log(heros)))
.subscribe((heroes: Hero[]) => {
this.heroes = heroes as Hero[];
}
)};
所以,问题:
这个有效:
<ul class="heroes">
<li *ngFor="let hero of heroes">
<a routerLink="/detail/{{hero.id}}">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</a>
</li>
</ul>
但这不是:
<p-table [value]="heroes"| async>
<ng-template pTemplate="header">
<tr>
<th>id</th>
<th>name</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-hero>
<tr>
<td>{{heroes.id}}</td>
<td>{{heroes.name}}</td>
</tr>
</ng-template>
</p-table>[enter image description here][1]
我得到的错误是:
TS2339:属性 'id' 在类型 'Hero[]' 上不存在。
TS2339:属性 'name' 在类型 'Hero[]' 上不存在。
![1]: https://i.stack.imgur.com/EJ06E.png
您使用了错误的变量名。
<ng-template pTemplate="body" let-hero>
在上面的行中,您将变量命名为“hero”以访问“heroes”数组的各个元素。所以,应该这样调用属性:
<td>{{hero.id}}</td>
我有一个基于 Angular.io 教程的项目,包括“Hero”-接口和数据,以及一个使用 HTTPClient 的“HeroService”。
我能够在模板中使用标准 HTML 获取数据并显示它,但在使用 PrimeNG table 时不能,使用他们网页中的示例。所以我有模板所需的数据,但我不确定如何将其正确传递给 PrimeNG。我希望在不改变 HeroSerice 工作方式的情况下做到这一点。
我通常对 Observables、Promises 和相关技术感到困惑,因此很难进一步描述。我已阅读 Using PrimeNG with Observables (rxjs) in Angular 4,但没有解决我的问题。
英雄界面:
export interface Hero {
id: number;
name: string;
}
InMemoryDataService:
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const heroes = [
{ id: 11, name: 'Dr Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
return {heroes};
}
来自 HeroService 的方法:
/** GET heroes from the server */
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
catchError(this.handleError<Hero[]>('getHeroes', []))
);
}
我的 TreeTableComponent:(在我将其缩小为 table 之前命名)
export class TreeTableComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService : HeroService) { }
ngOnInit() {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes().pipe(tap(heros => console.log(heros)))
.subscribe((heroes: Hero[]) => {
this.heroes = heroes as Hero[];
}
)};
所以,问题:
这个有效:
<ul class="heroes">
<li *ngFor="let hero of heroes">
<a routerLink="/detail/{{hero.id}}">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</a>
</li>
</ul>
但这不是:
<p-table [value]="heroes"| async>
<ng-template pTemplate="header">
<tr>
<th>id</th>
<th>name</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-hero>
<tr>
<td>{{heroes.id}}</td>
<td>{{heroes.name}}</td>
</tr>
</ng-template>
</p-table>[enter image description here][1]
我得到的错误是:
TS2339:属性 'id' 在类型 'Hero[]' 上不存在。
TS2339:属性 'name' 在类型 'Hero[]' 上不存在。
![1]: https://i.stack.imgur.com/EJ06E.png
您使用了错误的变量名。
<ng-template pTemplate="body" let-hero>
在上面的行中,您将变量命名为“hero”以访问“heroes”数组的各个元素。所以,应该这样调用属性:
<td>{{hero.id}}</td>