我有点困惑如何获取key并value同时使用angular2对象的*ngFor用于遍历的对象.我知道在角度1.x中有一个类似的语法
ng-repeat="(key, value) in demo"
但我不知道如何在angular2中做同样的事情.我尝试过类似的东西,没有成功:
<ul>
<li *ngFor='#key of demo'>{{key}}</li>
</ul>
demo = {
'key1': [{'key11':'value11'}, {'key12':'value12'}],
'key2': [{'key21':'value21'}, {'key22':'value22'}],
}
以下是我的尝试:http ://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
我怎样才能获得key1并key2动态使用*ngFor？经过广泛搜索后,我发现了使用管道的想法,但我不知道如何去做.是否有任何内置管道在angular2中做同样的事情？
我究竟做错了什么？
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `<div *ngFor="let talk in talks">
{{talk.title}} by {{talk.speaker}}
<p>{{talk.description}}
</div>`
})
class ConfTalks {
talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
{title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
selector: 'my-app',
directives: [ConfTalks],
template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])
错误是
EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
我正在尝试在Angular 2 Alpha 28中做一些事情,并且我遇到了字典和NgFor的问题.
我有一个TypeScript接口,如下所示:
interface Dictionary {
[ index: string ]: string
}
在JavaScript中,这将转换为数据可能如下所示的对象:
myDict={'key1':'value1','key2':'value2'}
我想迭代这个并尝试这个:
<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>
但无济于事,以下都没有:
<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>
在所有情况下,我都会收到"意外令牌"或"无法找到'iterableDiff'管道支持对象"之类的错误
我在这里错过了什么？这不可能了吗？(第一种语法适用于Angular 1.x)或者是迭代对象的语法是不同的？
我想在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"
}
}
我知道我们可以使用管道迭代对象,但我们如何能够从对象进一步迭代意味着data-> picture-> thum:url.
使用Angular keyvalue管道迭代对象的属性时,如下所示:
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
我遇到了一个问题,即属性没有按预期的顺序迭代.这条评论表明我并不是唯一一个遇到这个问题的人:
有人可以建议在使用keyvalue管道时决定迭代顺序的内容以及如何强制执行特定的迭代顺序吗？我理想的迭代顺序是添加属性的顺序.
谢谢