相关疑难解决方法(0)

我正在尝试在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)或者是迭代对象的语法是不同的？

我有这个枚举(我正在使用TypeScript):

export enum CountryCodeEnum {
    France = 1,
    Belgium = 2
}

我想在我的表单中构建一个select,每个选项的枚举整数值为value,枚举文本为label,如下所示:

<select>
     <option value="1">France</option>
     <option value="2">Belgium</option>
</select>

我怎样才能做到这一点 ？

我想在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 2+

问题

因此,您希望显示列表的标记,此列表的值来自后端,并且由于某种原因而不是您收到类似的旧对象数组.

    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}

然后尝试使用*ngFor但会出现一条错误消息:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

你可以在后端修复它,这样你就可以得到一个对象数组,但是并不是没有时间.你不担心孩子,我有我们.

我想从Firebase显示以下数据

{
   "-KBN9O_qqz-nZ9tPWFdM":{
      "createdAt":1456399292790,
      "isActive":true,
      "name":"Hero 1"
   },
   "-KBN9gjJw1ZlMgt9pVsl":{
      "createdAt":1456399371220,
      "isActive":true,
      "name":"Hero 2"
   },
   "-KBN9hYI4vYAsyh5k1lX":{
      "createdAt":1456399374548,
      "isActive":true,
      "name":"Hero 3"
   }
}

在做angular.io Tour of Heroes教程时,例如

<li *ngFor="#hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

所以英雄身份证应该显示例如-KBN9hYI4vYAsyh5k1lX ,英雄名称应该显示例如hero 3

我已经做了一些研究,并通过@Thierry Templier 使用*ngFor访问密钥和对象值来遇到这个stackoverflow解决方案

(1)这是解决我问题的正确方法吗？

(2)这个问题是否有一个更简单的解决方案,因为我觉得使用Angular2的开发人员显示这样的json数据真的很常见.

这是我的对象(它有n个动态键.我在下面的例子中只显示了两个)

let obj = {
abc:["some text", "some more text"],
xyz:["more text", "what do you think?", "I'm tired now"]

}

这是我尝试循环抛出上面的内容并打印所有值

 <div *ngFor='let item of obj ; let i = index;'>
            <p *ngFor="let value of obj.i">{{value}}
 </div>

但上述似乎不起作用.我做错了什么,语法是正确的？

使用Angular keyvalue管道迭代对象的属性时,如下所示:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

我遇到了一个问题,即属性没有按预期的顺序迭代.这条评论表明我并不是唯一一个遇到这个问题的人:

如何在Angular中使用ngFor循环对象属性

有人可以建议在使用keyvalue管道时决定迭代顺序的内容以及如何强制执行特定的迭代顺序吗？我理想的迭代顺序是添加属性的顺序.

谢谢

我创建了一个能够*ngFor与对象一起使用的管道.但是,更新对象时,管道不会更新.我已经找到了解决办法在这里通过使用状态的管道pure: false.

对于我的用例,这个解决方案在性能方面是不可接受的,因为它会为每次更改刷新管道(我几乎到处都使用这个管道来渲染复杂的元素).

有没有办法触发管道的手动刷新,所以它只在我想要时刷新？

这是一个plunker - 要查看问题,请尝试通过单击-按钮删除名称.如果添加,pure:false您将看到它将起作用:

@Pipe({name: 'keys', pure: false})
export class Keys implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

我想要的是在我的delName()函数中添加一些东西,以便更新管道......

我对 Angular 非常陌生，目前我正在学习 Angular 6，它是 Angular 的最新版本。

在这里，我尝试使用从 JSON 检索的文章来设计我的博客页面，并将它们显示在两列中，如下图所示：

标题旁边的数字是文章数组中文章的索引。很容易看出问题：从 1 开始的索引被重复两次。

这是我的代码，请告诉我为什么我的细节错误以及如何修复它。

博客服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BlogService {

  constructor(private http: HttpClient) { }

  getArticleList() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

文章列表组件：

从 '@angular/core' 导入 { Component, OnInit }; 从'../blog.service'导入{BlogService}；

@Component({
  selector: 'app-blog',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit {
  articles: Object;

  constructor(private data: BlogService) { }

  ngOnInit() {
    this.data.getArticleList().subscribe(
      data …

我有以下 JSON，我想从中提取技能是真的。

[  
   {  
      "_id":"5de9f351baca28556c6a4b71",
      "Name":"Harsha",
      "Age":20,
      "Gender":"M",
      "Skills":{  
         "Java":"",
         "Mule":true,
         "Angular":""
      }
   },
   {  
      "_id":"5de9f358baca28556c6a4b72",
      "Name":"Anji",
      "Age":21,
      "Gender":"M",
      "Skills":{  
         "Java":"",
         "Mule":true,
         "Angular":true
      }
   },
   {  
      "_id":"5dea110297c2b65298b136e4",
      "Name":"Abhi",
      "Age":25,
      "Gender":"M",
      "Skills":{  
         "Java":"",
         "Mule":true,
         "Angular":""
      }
   }
]

我可以使用以下代码打印其余数据

<table *ngIf="formTemplate">
        <tr>
            <th *ngFor="let header of questionTitleArray" >{{header}}</th>
        </tr>

        <tr *ngFor="let data of surveyDataFromDB">
                <ng-container *ngFor="let head of questionTitleArray">
                <td>{{data[head]}}</td>         
        </ng-container>
        </tr>
    </table>

（这里的 JSON 是“surveyDataFromDB”）

下面是我得到的输出

Name    Age Gender  Skills
Harsha  20  M   [object Object]
Anji    21  M   [object Object] …