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的源代码，因为它包含一些局部变量为＆＃34; index＆＃34;或者＆＃34;奇怪＆＃34;。

我认为解决方案是在custom指令中创建一个局部变量，该变量将返回当时正在迭代的对象[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

如果您不想在组件中执行此操作，也可以创建一个Pipe来获取对象键。我不确定访问object[value]会出现什么问题。

Angular - 自定义结构指令 - ngForIn：如何创建自己的局部变量？

1 个答案: