Angular - Пользовательская структурная директива - ngForIn: Как создать собственную локальную переменную?

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);
        }
    }
}

Проблема, с которой я сталкиваюсь сейчас, заключается в том, что мне нужно иметь доступ к значению объекта [ключ] несколько раз в шаблоне.На данный момент я работаю с этим вот так (грязно):

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

Однако я хотел бы иметь возможность сделать что-то вроде этого:

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

У меня естьчтение исходного кода для ngForOf , поскольку он включает в себя некоторые локальные переменные как "index" или "odd".

Я думаю, что решением было бы создание локальной переменной в пользовательской директиве, которая бывернуть значение объекта [ключ], который повторяется в тот момент, но я не совсем понимаю, как мне это сделать;или, может быть, есть более простое решение, о котором я не знаю.

Кто-нибудь сталкивался с подобной проблемой и нашел решение?

Спасибо!

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] подаркам.