angular2/javascript-NgFor在对象内部的数组中循环
我有自己的对象和数据,我使用ngFor循环。但是,对象中有一个数组部分,我想在angular2/javascript-NgFor在对象内部的数组中循环,javascript,arrays,angular,angular2-template,Javascript,Arrays,Angular,Angular2 Template,我有自己的对象和数据,我使用ngFor循环。但是,对象中有一个数组部分,我想在 现在看起来是这样的。但是,我不希望完整的字符串在一个中,我只希望数组的一部分在那里。 相关代码: 层次模型 export class Tier { constructor ( public id: number, public title: string, public rewards: any[], public price: number ) {} } 组件: ex
现在看起来是这样的。但是,我不希望完整的字符串在一个
中,我只希望数组的一部分在那里。
相关代码:
层次模型
export class Tier {
constructor (
public id: number,
public title: string,
public rewards: any[],
public price: number
)
{}
}
组件:
export class PackagesComponent { //will be renamed to TierComponent
public tierToEdit: Tier;
editMode = false;
tiers: Tier[] = [
new Tier(
10,
'First Tier',
['Server access - Simple', 'Win something small', 'and so on'],
5.00),
new Tier(
11,
'Second Tier',
['Server access - Standard', 'Win something medium', 'and so on and on'],
10.00),
new Tier(
12,
'Third Tier',
['Server access - Advanced', 'Win something big', 'and so on and on and on'],
10.00)
]
<div class="row">
<div class="col-md-4" *ngFor="let tier of tiers; let i=index;">
<ul class="pricing-table">
<li class="plan-name">
{{ tier.title }}
</li>
<li *ngFor="let reward of tiers">
{{ reward.rewards }}
</li>
<p class="plan-price">{{ tier.price }}</p>
<li class="plan-action">
<a class="btn btn-primary" (click)="onEdit(tier)">Edit</a>
<a class="btn btn-success" (click)="this.clickSave()">SaveYes</a>
<a class="btn btn-warning" >Get</a>
</li>
</ul>
模板:
export class PackagesComponent { //will be renamed to TierComponent
public tierToEdit: Tier;
editMode = false;
tiers: Tier[] = [
new Tier(
10,
'First Tier',
['Server access - Simple', 'Win something small', 'and so on'],
5.00),
new Tier(
11,
'Second Tier',
['Server access - Standard', 'Win something medium', 'and so on and on'],
10.00),
new Tier(
12,
'Third Tier',
['Server access - Advanced', 'Win something big', 'and so on and on and on'],
10.00)
]
<div class="row">
<div class="col-md-4" *ngFor="let tier of tiers; let i=index;">
<ul class="pricing-table">
<li class="plan-name">
{{ tier.title }}
</li>
<li *ngFor="let reward of tiers">
{{ reward.rewards }}
</li>
<p class="plan-price">{{ tier.price }}</p>
<li class="plan-action">
<a class="btn btn-primary" (click)="onEdit(tier)">Edit</a>
<a class="btn btn-success" (click)="this.clickSave()">SaveYes</a>
<a class="btn btn-warning" >Get</a>
</li>
</ul>
-
{{tier.title}}
-
{{奖励.奖励}
{{tier.price}
-
我试过的其他方法是:
<div class="col-md-4" *ngFor="let tier of tiers; let i=index;">
<!-- Show Mode -->
<ul *ngIf="!editMode || tierToEdit != tier" class="pricing-table">
<li class="plan-name">
{{ tier.title }}
</li>
<li *ngFor="let reward of tiers; let i=index">
{{ reward.rewards[i] }}
</li>
-
{{tier.title}}
-
{{奖励.奖励[i]}
然后给了我第一个数组的第一个元素,第二个数组的第二个元素和第三个数组的第三个元素:
希望这不会让人困惑,对于angular/javascript来说还是很新的,很抱歉问了一个愚蠢的问题或使用了错误的术语:)非常感谢 试试这个
<li *ngFor="let reward of tier.rewards">
{{ reward }}
</li>
-
{{奖励}
您还需要迭代第二个*ngFor
中的嵌套数组,如:
<div class="row">
<div class="col-md-4" *ngFor="let tier of tiers; let i=index;">
<ul class="pricing-table">
<li class="plan-name">
{{ tier.title }}
</li>
<li *ngFor="let reward of tier.rewards">
{{reward}}
</li>
<p class="plan-price">{{ tier.price }}</p>
<li class="plan-action">
<a class="btn btn-primary" (click)="onEdit(tier)">Edit</a>
<a class="btn btn-success" (click)="this.clickSave()">SaveYes</a>
<a class="btn btn-warning" >Get</a>
</li>
</ul>
</div>
</div>
-
{{tier.title}}
-
{{奖励}
{{tier.price}
-
编辑
萨维耶斯
得到
请创建一个plnkr或小提琴。哇,我觉得自己太愚蠢了。非常感谢,这很有效。我不知道我可以使用tier.rewards,我想应该是tierS.rewards,因为这是我在组件中定义它的方式。ts非常感谢!那么,基本上现在的层是指上面的层?只是为了让我明白future@junior_dn:是层
参考第1层*ngFor
,无论内部有多少ngFor,因为*ngFor创建块范围
,就像javascript中的变量
。。。很高兴能帮助你:)