Angular

Question

我正在用简单的代码测试 Angular 的 keyvalue 管道：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div *ngFor="let prop of testObj | keyvalue">
      <div>key: {{prop.key}}</div>
      <div>value: {{prop.value}}<div>
    </div> `
})
export class AppComponent {
  testObj = { id: 1, name: "Abdul Rafay" }
}

但它给我这个错误：

Template parse errors: The pipe 'keyvalue' could not be found ("]prop of testObj | keyvalue"> key: {{prop.key}} value: {{prop.value}}"): ng:///AppModule/AppComponent.html@0:17 Evaluating src/main.ts Booting application

我错过了什么吗？这是我的 Stackblitz

Answer 1

你的代码没问题。您只需要将依赖项更新到 6.1 即可使用 keyvalue 管道。

Stackblitz here

Answer 2

KeyValue 管道在 angular 6.1 中可用以更新您的依赖项它将起作用

如果你使用的是angular6，你可以试试这个

HTML

  <div *ngFor="let prop of key">
          <div>key: {{prop}}</div>
          <div>value: {{testObj[prop]}}<div>
        </div>

TS

 testObj = { id: 1, name: "Abdul Rafay" }
    get key(){
      return Object.keys(this.testObj);
    }

示例：https://stackblitz.com/edit/angular-6-template-x9hady

Angular - 找不到管道 'keyvalue'

Angular - The pipe 'keyvalue' could not be found

angular-pipe