Angular - 无法找到管道'keyvalue'

Question

我keyvalue用简单的代码测试Angular的管道:

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" }
}

但它给了我这个错误:

模板解析错误:无法找到管道'keyvalue'(testObj | keyvalue的"prop")> key:{{prop.key}} value:{{prop.value}}"):ng:/// AppModule /AppComponent.html@0:17评估src/main.ts引导应用程序

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

Answer 1

你的代码很好.您只需将依赖项更新为6.1即可使用keyvalue管道.

Stackblitz 在这里

Answer 2

KeyValue Pipe可在angular 6.1中使用，以更新您的依赖关系，它将起作用

如果您使用的是角度6，可以尝试一下

的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