javascript - Angular - 自定义结构指令 - ngForIn : How can I create my own local variable?

Question

希望您正确理解这一点。

我创建了一个自定义 ngForIn 指令来获取对象的键。使用以下代码可以正常工作:

import {Directive, Input, OnChanges, SimpleChange, SimpleChanges} from "@angular/core";
import {NgForOf} from "@angular/common";

@Directive({
    selector: "[ngFor][ngForIn]"
})
export class NgforinDirective<T> extends NgForOf<T> implements OnChanges {

    @Input() public ngForIn: any;

    public ngOnChanges(changes: SimpleChanges): void {
        if (changes.ngForIn) {

            if (this.ngForIn) {
                this.ngForOf = Object.keys(this.ngForIn) as Array<any>;
                const change = changes.ngForIn;
                const currentValue = Object.keys(change.currentValue);
                const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined;
                changes.ngForOf = new SimpleChange(previousValue, currentValue, change.firstChange);
            }
            super.ngOnChanges(changes);
        }
    }
}

我现在面临的问题是我需要在模板中多次访问 object[key] 的值。截至目前，我正在像这样使用它(脏):

<div *ngFor="let key in object">
     {{object[key]}}

但是，我希望能够做这样的事情:

<div *ngFor="let key in object; let value = object[key]">
     {{value}}

我正在阅读 ngForOf 的源代码因为它包含一些局部变量，如“index”或“odd”。

我认为解决方案是在自定义指令中创建一个局部变量，该变量将返回当时正在迭代的 object[key] 的值，但我真的不明白该怎么做；或者也许有一个我不知道的更简单的解决方案。

有人遇到过这样的问题并找到解决方案吗？

谢谢!

Answer 1

您已经可以使用 *ngFor 执行您想要的操作。只需使用 Object.keys(yourObject) 获取对象的键，然后迭代它们并显示值。

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let key of keys;">
        {{ key }}: {{ person[key] }}
      </li>
    </ul>
  `,
})
export class App {
  keys: string[];
  person: object;

  constructor() {
    this.person = {
      'First Name': 'Bob',
      'Last Name': 'Smith',
      'Age': 44,
    };
    this.keys = Object.keys(this.person);
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

Plunkr:https://plnkr.co/edit/BOgMT8XYphirNi6kObZv

如果您不想在组件中这样做，您也可以创建一个管道来获取对象键。我不确定访问 object[value] 会出现什么问题。