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

Question

I hope you understand this correctly.

I created a custom ngForIn directive to get the keys of an object. This works properly with the following code:

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

The problem I'm facing right now is that I need to have access to the value of object[key] multiple times in the template. As of now i'm working with it like this (dirty):

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

However, I would like to be able to do something like this:

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

I have being reading the source code for ngForOf as it includes some local variables as "index" or "odd".

I think a solution would be to create a local variable within the custom directive that would return the value of the object[key] that is iterating at that moment, but I don't really understand how should I do it; or maybe there is an easier solution that I'm not aware of.

Has anyone faced a problem like this and found a solution?

Thanks!

Answer 1

You can already do what you want using *ngFor . Just get the keys of the object using Object.keys(yourObject) , then iterate over them and display the value.

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

You could also create a Pipe to get the object keys if you didn't want to do that in your component. I'm not sure what problem accessing object[value] presents.