相关疑难解决方法(0)

使用*ngFor访问键和对象的值

我有点困惑如何获取keyvalue同时使用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

我怎样才能获得key1key2动态使用*ngFor?经过广泛搜索后,我发现了使用管道的想法,但我不知道如何去做.是否有任何内置管道在angular2中做同样的事情?

object typescript angular

349
推荐指数
14
解决办法
34万
查看次数

Angular2 UL/LI JSON-tree在ngFor中递归

我想将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.有人有个主意吗?

tree json html-lists angular

23
推荐指数
2
解决办法
1万
查看次数

错误显示在*ngfor json数组对象中

从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)

json ngfor angular

18
推荐指数
1
解决办法
3万
查看次数

在角度2中迭代Ngfor上的json对象

我在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)

json observable ngfor angular

9
推荐指数
1
解决办法
3万
查看次数

管道'AsyncPipe'的参数无效

所以当我尝试从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)

javascript firebase typescript angular

4
推荐指数
2
解决办法
3万
查看次数

在Angular 2*ngFor的数组/ json渲染中深度嵌套json到数组

我想用角度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数组.

arrays json angular

2
推荐指数
1
解决办法
6113
查看次数