我有点困惑如何获取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中做同样的事情?
我想将JSON树转换为Angular2中的无序列表.我知道Angular1的递归指令解决方案,我很确定Angular2中的解决方案也是递归的.
[
{name:"parent1", subnodes:[]},
{name:"parent2",
subnodes:[
{name:"parent2_child1", subnodes:[]}
],
{name:"parent3",
subnodes:[
{name:"parent3_child1",
subnodes:[
{name:"parent3_child1_child1", subnodes:[]}
]
}
]
}
]
Run Code Online (Sandbox Code Playgroud)
这个无序的清单
<ul>
<li>parent1</li>
<li>parent2
<ul>
<li>parent2_child1</li>
</ul>
</li>
<li>parent3
<ul>
<li>parent3_child1
<ul>
<li>parent3_child1_child1</li>
</ul>
</li>
</ul>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
使用Angular2和ngFor.有人有个主意吗?
从rest api获取json数组对象并尝试在ngfor中显示失败的原因
EXCEPTION:找不到'object'类型的不同支持对象'[object Object]'.NgFor仅支持绑定到诸如Arrays之类的Iterables.在[HomeComponent @ 5:37中的索引]中
码
import {Component} from 'angular2/core';
import {HomeService} from './home.services';
import {Index} from './index';
@Component({
selector: 'home-app',
providers: [HomeService],
template: `
<section class="left_side">
<article>
<div class="div_home">
<div class="div_homeIndxPartition">
<div class="div_IndxPartition" *ngFor="#indObj of indexes">
<table width="500px" class="idx_cons_table_det">
<tr>
<th align="center" color="#A9F5F2"><h3>{{indObj.name}} ({{indObj.tracker}})</h3></th>
<th align="center">Value</th>
<th align="center">Change</th>
<th align="center">%</th>
</tr>
<tr>
<td align="center" colspan="1"></td>
<td align="center">{{indObj.value}}</td>
<td align="center">{{indObj.change}}</td>
<td align="center">{{indObj.percent}}%</td>
</tr>
</table>
<br/>
<table width="500px" class="idx_cons_table">
<tr>
<th align="center">High</th>
<th align="center">Low</th>
<th align="center">Open</th>
<th align="center">Close</th>
<th …Run Code Online (Sandbox Code Playgroud) 我在Ngfor中迭代一个json对象时遇到了麻烦,有我的模板:
模板:
<h1>Hey</h1>
<div>{{ people| json}}</div>
<h1>***************************</h1>
<ul>
<li *ngFor="#person of people">
{{
person.label
}}
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
人是我正在尝试迭代的json对象,我有(人| json)的结果而没有得到列表,这里是截图:

并完成,这是json文件的一部分:
{
"actionList": {
"count": 35,
"list": [
{
"Action": {
"label": "A1",
"HTTPMethod": "POST",
"actionType": "indexation",
"status": "active",
"description": "Ajout d'une transcription dans le lac de données",
"resourcePattern": "transcriptions/",
"parameters": [
{
"Parameter": {
"label": "",
"description": "Flux JSON à indexer",
"identifier": "2",
"parameterType": "body",
"dataType": "json",
"requestType": "Action",
"processParameter": {
"label": "",
"description": "Flux JSON à indexer",
"identifier": "4", …Run Code Online (Sandbox Code Playgroud) 所以当我尝试从firebase获取数据时,我得到了这个
Invalid argument '{"-KCO4lKzEJPRq0QgkfHO":{"description":"teste","id":1457488598401,"resourceUrl":"tete","title":"test2"}}' for pipe 'AsyncPipe' in [listItems | async in ArcListComponent@2:10]
Run Code Online (Sandbox Code Playgroud)
ArcListComponent
import { Component, OnInit } from "angular2/core";
import { FirebaseService } from "../shared/firebase.service";
import { ArcItem } from "./arc-item.model";
@Component({
selector: "arc-list",
template: `
<ul class="arc-list">
<li *ngFor="#item of listItems | async " class="arc-item">
<h3>{{ item.name}}</h3><a [href]="item.resourceUrl" target="_blank" class="btn btn-success pull-right"><span>Go</span></a>
<hr>
<blockquote>{{ item.description }}</blockquote>
<hr>
</li>
</ul>
`
})
export class ArcListComponent implements OnInit {
listItems: string;
constructor(private _firebaseService: FirebaseService) {}
ngOnInit(): any {
this._firebaseService.getResources().subscribe( …Run Code Online (Sandbox Code Playgroud) 我想用角度2*ngFor列出以下json的状态和类型.还应呈现父母属性.
var test= {
'192-168-0-16':{
'ac395516-96d0-4533-8e0e-efbc68190e':{
'state': "none",
'typ': "test"
},
'ac395516-96d0-4533-8e0e-efbc68190e':{
'state': "none",
'typ': "dummy"
}
},
'222-21-12-12': {
'ac395516-96d0-4533-8e0e-efbc68190e': {
'state': "none",
'typ': "none"
}
}
Run Code Online (Sandbox Code Playgroud)
角度2:
<div *ngFor='#s of test'> <!-- also other properties should be visible -->
<div *ngFor='#t of s'>
{{t.state}} {{t.typ}}
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
当然这不起作用.没有很多数据转换是否可能?我不知道如何获取我的json数组.
angular ×6
json ×4
ngfor ×2
typescript ×2
arrays ×1
firebase ×1
html-lists ×1
javascript ×1
object ×1
observable ×1
tree ×1