Lặp lại đối tượng trong Angular

Tôi đang cố gắng thực hiện một số điều trong Angular 2 Alpha 28, và đang gặp vấn đề với từ điển và NgFor.

Tôi có một giao diện trong TypeScript trông như thế này:

interface Dictionary {
    [ index: string ]: string
}

Trong JavaScript, điều này sẽ dịch sang một đối tượng có dữ liệu có thể trông như thế này:

myDict={'key1':'value1','key2':'value2'}

Tôi muốn lặp lại điều này và thử điều này:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>

Nhưng vô ích, không có cái nào dưới đây hoạt động cả:

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>

Trong mọi trường hợp, tôi gặp lỗi như "Mã thông báo không mong đợi" hoặc "Không thể tìm thấy đối tượng hỗ trợ đường ống 'iterableDiff'"

Tôi đang thiếu gì ở đây? Điều này là không thể nữa? (Cú pháp đầu tiên hoạt động trong Angular 1.x) hoặc là cú pháp khác nhau để lặp qua một đối tượng?

Có vẻ như họ không muốn hỗ trợ cú pháp từ ng1.

Theo Miško Hevery ( tham khảo ):

Bản đồ không có thứ tự trong các khóa và do đó việc lặp lại là không thể đoán trước. Điều này đã được hỗ trợ trong ng1, nhưng chúng tôi nghĩ rằng đó là một lỗi và sẽ không được hỗ trợ trong NG2

Kế hoạch là có một ống mapToIterable

<div *ngFor"var item of map | mapToIterable">

Vì vậy, để lặp lại đối tượng của bạn, bạn sẽ cần sử dụng một "đường ống". Hiện tại không có đường ống thực hiện mà làm điều đó.

Như một cách giải quyết, đây là một ví dụ nhỏ lặp lại các phím:

Thành phần:

import {Component} from 'angular2/core';

@Component({
  selector: 'component',
  templateUrl: `
       <ul>
       <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
       </ul>
  `
})
export class Home {
  myDict : Dictionary;
  constructor() {
    this.myDict = {'key1':'value1','key2':'value2'};
  }

  keys() : Array<string> {
    return Object.keys(this.myDict);
  }
}

interface Dictionary {
    [ index: string ]: string
}

Góc 6.1.0+ Trả lời

Sử dụng keyvalue-pipe tích hợp như thế này:

<div *ngFor="let item of myObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

hoặc như thế này:

<div *ngFor="let item of myObject | keyvalue:mySortingFunction">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

ví dụ như ở đâu mySortingFunctiontrong .tstập tin của bạn :

mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

Stackblitz: https://stackblitz.com/edit/angular-iterate-key-value

Bạn sẽ không cần phải đăng ký cái này trong bất kỳ mô-đun nào, vì các ống Angular hoạt động ngoài hộp trong bất kỳ mẫu nào.

Nó cũng hoạt động cho Javascript-Maps .

cố gắng sử dụng đường ống này

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ngFor="#value of object | values"> </div>

Ngoài câu trả lời của @ obscur, đây là một ví dụ về cách bạn có thể truy cập cả keyvà valuetừ @View.

Ống:

@Pipe({
   name: 'keyValueFilter'
})

export class keyValueFilterPipe {
    transform(value: any, args: any[] = null): any {

        return Object.keys(value).map(function(key) {
            let pair = {};
            let k = 'key';
            let v = 'value'


            pair[k] = key;
            pair[v] = value[key];

            return pair;
        });
    }

}

Lượt xem:

<li *ngFor="let u of myObject | 
keyValueFilter">First Name: {{u.key}} <br> Last Name: {{u.value}}</li>

Vì vậy, nếu đối tượng trông giống như:

myObject = {
    Daario: Naharis,
    Victarion: Greyjoy,
    Quentyn: Ball
}

Kết quả được tạo ra sẽ là:

Tên: Daario
Họ: Naharis

Tên: Nạn nhân
Tên cuối cùng: Greyjoy

Tên: Quentyn
Tên cuối cùng: Bóng

Đã cập nhật: Angular hiện đang cung cấp đường ống để lop qua đối tượng json thông qua keyvalue:

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

DEMO LÀM VIỆC , và để biết thêm chi tiết Đọc

Trước đây (Đối với phiên bản cũ hơn): Cho đến bây giờ câu trả lời tốt nhất / ngắn nhất tôi tìm thấy là (Không có bất kỳ chức năng Lọc hoặc tùy chỉnh nào từ phía Thành phần)

Thành phần bên:

objectKeys = Object.keys;

Mẫu bên:

<div *ngFor='let key of objectKeys(jsonObj)'>
   Key: {{key}}

    <div *ngFor='let obj of jsonObj[key]'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

DEMO LÀM VIỆC

Thêm vào câu trả lời tuyệt vời của SimonHawgie . Tôi đã tạo một phiên bản cô đọng, sử dụng một số tính năng bản thảo mới. Tôi nhận ra rằng phiên bản của SimonHawemme là cố ý dài dòng để giải thích các chi tiết cơ bản. Tôi cũng đã thêm một kiểm tra đầu ra sao cho các đường ống làm việc cho falsy giá trị. Ví dụ: nếu bản đồ lànull .

Lưu ý rằng việc sử dụng một biến đổi lặp (như được thực hiện ở đây) có thể hiệu quả hơn vì chúng ta không cần phân bổ bộ nhớ cho một mảng tạm thời (như được thực hiện trong một số câu trả lời khác).

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'mapToIterable'
})
export class MapToIterable implements PipeTransform {
    transform(map: { [key: string]: any }, ...parameters: any[]) {
        if (!map)
            return undefined;
        return Object.keys(map)
            .map((key) => ({ 'key': key, 'value': map[key] }));
    }
}

Đây là một biến thể của một số câu trả lời ở trên hỗ trợ nhiều biến đổi (keyval, key, value):

import { Pipe, PipeTransform } from '@angular/core';

type Args = 'keyval'|'key'|'value';

@Pipe({
  name: 'mapToIterable',
  pure: false
})
export class MapToIterablePipe implements PipeTransform {
  transform(obj: {}, arg: Args = 'keyval') {
    return arg === 'keyval' ?
        Object.keys(obj).map(key => ({key: key, value: obj[key]})) :
      arg === 'key' ?
        Object.keys(obj) :
      arg === 'value' ?
        Object.keys(obj).map(key => obj[key]) :
      null;
  }
}

Sử dụng

map = {
    'a': 'aee',
    'b': 'bee',
    'c': 'see'
}

<div *ngFor="let o of map | mapToIterable">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let o of map | mapToIterable:'keyval'">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let k of map | mapToIterable:'key'">{{k}}</div>
  <div>a</div>
  <div>b</div>
  <div>c</div>

<div *ngFor="let v of map | mapToIterable:'value'">{{v}}</div>
  <div>aee</div>
  <div>bee</div>
  <div>see</div>

Tôi đã có một vấn đề tương tự, xây dựng một cái gì đó cho các đối tượng và Bản đồ.

import { Pipe } from 'angular2/core.js';

/**
 * Map to Iteratble Pipe
 * 
 * It accepts Objects and [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 * 
 * Example:
 * 
 *  <div *ngFor="#keyValuePair of someObject | mapToIterable">
 *    key {{keyValuePair.key}} and value {{keyValuePair.value}}
 *  </div>
 * 
 */
@Pipe({ name: 'mapToIterable' })
export class MapToIterable {
  transform(value) {
    let result = [];
    
    if(value.entries) {
      for (var [key, value] of value.entries()) {
        result.push({ key, value });
      }
    } else {
      for(let key in value) {
        result.push({ key, value: value[key] });
      }
    }

    return result;
  }
}

Angular 2.x && Angular 4.x không hỗ trợ điều này

Bạn có thể sử dụng hai đường ống này để lặp lại theo khóa hoặc theo giá trị .

Chìa khóa ống:

import {Pipe, PipeTransform} from '@angular/core'

@Pipe({
  name: 'keys',
  pure: false
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value)
  }
}

Giá trị ống:

import {Pipe, PipeTransform} from '@angular/core'

@Pipe({
  name: 'values',
  pure: false
})
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key])
  }
}

Cách sử dụng:

let data = {key1: 'value1', key2: 'value2'}

<div *ngFor="let key of data | keys"></div>
<div *ngFor="let value of data | values"></div>

Nếu ai đó đang tự hỏi làm thế nào để làm việc với đối tượng đa chiều, đây là giải pháp.

giả sử chúng ta có đối tượng theo sau trong dịch vụ

getChallenges() {
    var objects = {};
    objects['0'] = { 
        title: 'Angular2', 
        description : "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    };

    objects['1'] = { 
        title: 'AngularJS', 
        description : "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    };

    objects['2'] = { 
        title: 'Bootstrap',
        description : "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    };
    return objects;
}

trong thành phần thêm chức năng sau

challenges;

constructor(testService : TestService){
    this.challenges = testService.getChallenges();
}
keys() : Array<string> {
    return Object.keys(this.challenges);
}

cuối cùng trong quan điểm làm theo

<div *ngFor="#key of keys();">
    <h4 class="heading">{{challenges[key].title}}</h4>
    <p class="description">{{challenges[key].description}}</p>
</div>

Tôi đã xé tóc ra khi cố phân tích cú pháp và sử dụng dữ liệu được trả về từ một cuộc gọi api / api JSON. Tôi không chắc chắn chính xác nơi tôi đã sai, tôi cảm thấy như tôi đã khoanh tròn câu trả lời trong nhiều ngày, theo đuổi các mã lỗi khác nhau như:

"Không thể tìm thấy đối tượng hỗ trợ đường ống 'iterableDiff'"

"Mảng TYpe chung yêu cầu một (các) đối số"

Lỗi phân tích cú pháp JSON và tôi chắc chắn những người khác

Tôi giả sử tôi chỉ có sự kết hợp sai của các bản sửa lỗi.

Vì vậy, đây là một chút tóm tắt về gotchas và những thứ cần tìm.

Trước hết hãy kiểm tra kết quả của các cuộc gọi api của bạn, kết quả của bạn có thể ở dạng một đối tượng, một mảng hoặc một mảng các đối tượng.

Tôi sẽ không tham gia vào nó quá nhiều, đủ để nói rằng Lỗi ban đầu của OP không thể lặp lại được nói chung là do bạn cố gắng lặp lại một đối tượng, không phải là một mảng.

Đây là một số kết quả gỡ lỗi của tôi hiển thị các biến của cả mảng và đối tượng

Vì vậy, như chúng ta thường muốn lặp lại kết quả JSON của mình, chúng ta cần đảm bảo nó ở dạng Mảng. Tôi đã thử rất nhiều ví dụ, và có lẽ biết những gì tôi biết bây giờ một số trong số đó sẽ thực sự hoạt động, nhưng cách tiếp cận tôi thực hiện là thực hiện một đường ống và mã tôi đã sử dụng là đăng bởi t.888

   transform(obj: {[key: string]: any}, arg: string) {
if (!obj)
        return undefined;

return arg === 'keyval' ?
    Object.keys(obj).map((key) => ({ 'key': key, 'value': obj[key] })) :
  arg === 'key' ?
    Object.keys(obj) :
  arg === 'value' ?
    Object.keys(obj).map(key => obj[key]) :
  null;

Thành thật tôi nghĩ rằng một trong những điều khiến tôi gặp phải là thiếu xử lý lỗi, bằng cách thêm cuộc gọi 'trả lại không xác định' tôi tin rằng chúng tôi hiện đang cho phép dữ liệu không mong đợi được gửi đến đường ống, điều này rõ ràng đã xảy ra trong trường hợp của tôi .

nếu bạn không muốn giải quyết tranh luận với đường ống (và xem tôi không nghĩ rằng nó cần thiết trong hầu hết các trường hợp), bạn có thể trả lại như sau

       if (!obj)
          return undefined;
       return Object.keys(obj);

Một số lưu ý khi tạo đường ống và trang hoặc thành phần sử dụng đường ống đó

là tôi đã nhận được lỗi về 'name_of_my_pipe' không được tìm thấy

Sử dụng lệnh 'ion tạo ống' từ CLI để đảm bảo các mô-đun ống.ts được tạo và được tham chiếu chính xác. đảm bảo bạn thêm phần sau vào trang mypage.module.ts.

import { PipesModule } from ‘…/…/pipes/pipes.module’;

(không chắc chắn nếu điều này thay đổi nếu bạn cũng có custom_module của riêng mình, bạn cũng có thể cần phải thêm nó vào mã hóa đơn hàng hóa.module.ts)

nếu bạn đã sử dụng lệnh 'ionic tạo trang' để tạo trang của mình, nhưng quyết định sử dụng trang đó làm trang chính của bạn, hãy nhớ xóa tham chiếu trang khỏi app.module.ts (đây là câu trả lời khác tôi đã đăng khi xử lý https: / /forum.ionicframework.com/t/solve-pipe-not-found-in-custom-component/95179/13?u=dreaser

Trong quá trình tìm kiếm câu trả lời của tôi, trong đó có một số cách để hiển thị dữ liệu trong tệp html và tôi không hiểu đủ để giải thích sự khác biệt. Bạn có thể thấy tốt hơn khi sử dụng cái này trong cái khác trong những tình huống nhất định.

            <ion-item *ngFor="let myPost of posts">
                  <img src="https://somwhereOnTheInternet/{{myPost.ImageUrl}}"/>
                  <img src="https://somwhereOnTheInternet/{{posts[myPost].ImageUrl}}"/>
                  <img [src]="'https://somwhereOnTheInternet/' + myPost.ImageUrl" />
            </ion-item>

Tuy nhiên, những gì đã làm việc cho phép tôi hiển thị cả giá trị và khóa là như sau:

    <ion-list>  
      <ion-item *ngFor="let myPost of posts  | name_of_pip:'optional_Str_Varible'">

        <h2>Key Value = {{posts[myPost]}} 

        <h2>Key Name = {{myPost}} </h2>

      </ion-item>
   </ion-list>  

để thực hiện lệnh gọi API, có vẻ như bạn cần nhập httpModule vào app.module.ts

import { HttpModule } from '@angular/http';
 .
 .  
 imports: [
BrowserModule,
HttpModule,

và bạn cần http trong trang bạn thực hiện cuộc gọi từ

import {Http} from '@angular/http';

Khi thực hiện cuộc gọi API, bạn dường như có thể truy cập dữ liệu con (các đối tượng hoặc mảng trong mảng) theo 2 cách khác nhau, dường như đều hoạt động

hoặc trong suốt cuộc gọi

this.http.get('https://SomeWebsiteWithAPI').map(res => res.json().anyChildren.OrSubChildren).subscribe(
        myData => {

hoặc khi bạn gán dữ liệu cho biến cục bộ của bạn

posts: Array<String>;    
this.posts = myData['anyChildren'];

(không chắc chắn nếu biến đó có phải là Chuỗi Array hay không, nhưng đó là những gì tôi có bây giờ. Nó có thể hoạt động như một biến chung hơn)

Và lưu ý cuối cùng, không cần thiết phải sử dụng thư viện JSON sẵn có, tuy nhiên bạn có thể thấy 2 cuộc gọi này có ích để chuyển đổi từ một đối tượng sang chuỗi và ngược lại

        var stringifiedData = JSON.stringify(this.movies);                  
        console.log("**mResults in Stringify");
        console.log(stringifiedData);

        var mResults = JSON.parse(<string>stringifiedData);
        console.log("**mResults in a JSON");
        console.log(mResults);

Tôi hy vọng việc tổng hợp thông tin này sẽ giúp được ai đó.

//Get solution for ng-repeat    
//Add variable and assign with Object.key

    export class TestComponent implements OnInit{
      objectKeys = Object.keys;
      obj: object = {
        "test": "value"
        "test1": "value1"
        }
    }
    //HTML
      <div *ngFor="let key of objectKeys(obj)">
        <div>
          <div class="content">{{key}}</div>
          <div class="content">{{obj[key]}}</div>
        </div>

Trong JavaScript, điều này sẽ dịch sang một đối tượng có dữ liệu có thể trông như thế này

Các giao diện trong TypeScript là một cấu trúc thời gian dev (hoàn toàn dành cho công cụ ... 0 tác động thời gian chạy). Bạn nên viết TypeScript giống như JavaScript của bạn.

Từ điển là một đối tượng, không phải là một mảng. Tôi tin rằng ng-repeat yêu cầu một mảng trong Angular 2.

Giải pháp đơn giản nhất là tạo một đường ống / bộ lọc chuyển đổi đối tượng thành một mảng khi đang di chuyển. Điều đó nói rằng, bạn có thể muốn sử dụng một mảng như @basarat nói.

Nếu bạn có es6-shimhoặc tsconfig.jsonmục tiêu của mình es6, bạn có thể sử dụng Bản đồ ES6 để thực hiện.

var myDict = new Map();
myDict.set('key1','value1');
myDict.set('key2','value2');

<div *ngFor="let keyVal of myDict.entries()">
    key:{{keyVal[0]}}, val:{{keyVal[1]}}
</div>

Xác định MapValuesPipevà triển khai TubeTransform :

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'mapValuesPipe'})
export class MapValuesPipe implements PipeTransform {
    transform(value: any, args?: any[]): Object[] {
        let mArray: 
        value.forEach((key, val) => {
            mArray.push({
                mKey: key,
                mValue: val
            });
        });

        return mArray;
    }
}

Thêm đường ống của bạn trong mô-đun ống của bạn. Điều này rất quan trọng nếu bạn cần sử dụng cùng một đường ống trong nhiều thành phần :

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ...
    MapValuesPipe
  ],
  declarations: [..., MapValuesPipe, ...]
})
export class PipesAggrModule {}

Sau đó, chỉ cần sử dụng đường ống trong html của bạn với *ngFor:

<tr *ngFor="let attribute of mMap | mapValuesPipe">

Hãy nhớ rằng, bạn sẽ cần khai báo FaucetModule của bạn trong thành phần mà bạn muốn sử dụng ống:

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}

Vì vậy, tôi sẽ thực hiện chức năng trợ giúp của riêng mình, objLpm (obj), trả về chỉ Object (obj) .keys.length. Nhưng sau đó khi tôi thêm nó vào mẫu * ngNếu hàm, IDE của tôi đã đề xuất objectKeys (). Tôi đã thử và nó đã hoạt động. Theo sau nó để tuyên bố, nó dường như được cung cấp bởi lib.es5.d.ts, vì vậy bạn đi!

Đây là cách tôi triển khai nó (Tôi có một đối tượng tùy chỉnh sử dụng các khóa được tạo ở phía máy chủ làm chỉ mục cho các tệp tôi đã tải lên):

        <div *ngIf="fileList !== undefined && objectKeys(fileList).length > 0">
          <h6>Attached Files</h6>
          <table cellpadding="0" cellspacing="0">
            <tr *ngFor="let file of fileList | keyvalue">
              <td><a href="#">{{file.value['fileName']}}</a></td>
              <td class="actions">
                <a title="Delete File" (click)="deleteAFile(file.key);">
                </a>
              </td>
            </tr>
          </table>
        </div>