我有点困惑如何获取key并value同时使用angular2对象的*ngFor用于遍历的对象.我知道在角度1.x中有一个类似的语法
ng-repeat="(key, value) in demo"
Run Code Online (Sandbox Code Playgroud)
但我不知道如何在angular2中做同样的事情.我尝试过类似的东西,没有成功:
<ul>
<li *ngFor='#key of demo'>{{key}}</li>
</ul>
demo = {
'key1': [{'key11':'value11'}, {'key12':'value12'}],
'key2': [{'key21':'value21'}, {'key22':'value22'}],
}
Run Code Online (Sandbox Code Playgroud)
以下是我的尝试:http ://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
我怎样才能获得key1并key2动态使用*ngFor?经过广泛搜索后,我发现了使用管道的想法,但我不知道如何去做.是否有任何内置管道在angular2中做同样的事情?
我想知道如何迭代TypeScript枚举和每个枚举的符号名称.
例如,
enum myEnum { entry1, entry2 }
for (var entry in myEnum) {
// use entry's name here, e.g., "entry1"
}
Run Code Online (Sandbox Code Playgroud) Typescript枚举似乎与Angular2的ngSwitch指令自然匹配.但是当我尝试在我的组件模板中使用枚举时,我得到"无法读取未定义的属性'xxx'......".如何在组件模板中使用枚举值?
请注意,这与基于枚举(ngFor)的所有值创建html选择选项的方法不同.这个问题是关于ngSwitch基于枚举的特定值.虽然出现了创建枚举类的内部引用的相同方法.
我想在Angular 2中使用*ngFor迭代[object object].
问题是对象不是对象数组而是包含更多对象的对象对象.
{
"data": {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "03215110224",
"role": null,
"email": "test@example.com",
"picture": **{ <-- I want to get thumb: url but not able to fetch that**
"url": null,
"thumb": {
"url": null
}
},
"address": "Nishtar Colony",
"city_id": 2,
"provider": "email",
"uid": "test@example.com"
}
}
Run Code Online (Sandbox Code Playgroud)
我知道我们可以使用管道迭代对象,但我们如何能够从对象进一步迭代意味着data-> picture-> thum:url.
我正在使用Angular2和Typscript.我有一个枚举:
export enum Role {
ServiceAdmin, CompanyAdmin, Foreman, AgentForeman,
CrewMember, AgentCrewMember, Customer
}
Run Code Online (Sandbox Code Playgroud)
我想使用*ngFor迭代枚举.做这个的最好方式是什么?我必须创建一个管道吗?或者有更简单的方法吗?
我有一个全局变量来存储这样的国家/地区列表:
export var COUNTRY_CODES = ["AD", "AE", "AF" /* and more */];
Run Code Online (Sandbox Code Playgroud)
在我的一个组件中,我使用普通的import语句导入了变量
import { COUNTRY_CODES } from "../constants";
Run Code Online (Sandbox Code Playgroud)
我可以在组件代码中自由访问这个全局变量,但是在HTML模板上无法实现这样的功能:
<option *ngFor="let countryCode of COUNTRY_CODES" [value]="countryCode">{{countryCode | countryName}}</option>
Run Code Online (Sandbox Code Playgroud)
我可以通过定义局部变量将全局变量传递给组件,并在初始化期间为其分配全局变量.
ngOnInit() {
this.countryCodes = COUNTRY_CODES;
}
Run Code Online (Sandbox Code Playgroud)
并更改ngFor此局部变量的to循环以使其工作.
我的问题:这是正确的方法吗?每次我想在模板中使用全局变量时,我都不太习惯定义桥接变量.
我一直在挖掘,发现我可以使用以下内容在对象上使用*ngFor:
<div *ngFor="#obj of objs | ObjNgFor">...</div>
Run Code Online (Sandbox Code Playgroud)
其中ObjNgFor管道是:
@Pipe({ name: 'ObjNgFor', pure: false })
export class ObjNgFor implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value).map(key => value[key]);
}
}
Run Code Online (Sandbox Code Playgroud)
但是,当我有这样的对象时:
{
"propertyA":{
"description":"this is the propertyA",
"default":"sth"
},
"propertyB":{
"description":"this is the propertyB",
"default":"sth"
}
}
Run Code Online (Sandbox Code Playgroud)
我不太确定如何提取'propertyA'和'propertyB',以便可以从*ngFor指令访问它.有任何想法吗?
UPDATE
我想要做的是呈现以下HTML:
<div *ngFor="#obj of objs | ObjNgFor" class="parameters-container">
<div class="parameter-desc">
{{SOMETHING}}:{{obj.description}}
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
什么东西等于propertyA和propertyB(这是对象的结构).所以,这会导致:
propertyA:this is the propertyA
propertyB:this is the …Run Code Online (Sandbox Code Playgroud)