Próbując pętli przez słownik JS w moim znaczniku przy użyciu *ngFor przeciwko Object.entries i otrzymywanie komunikatu o błędzie:

Błąd parsera: Nieoczekiwany token [, Oczekiwany identyfikator, słowo kluczowe lub ciąg w kolumnie 5 w [Pozwól [Klucz, pozycja] obiektu.Nentries (elementy)]

Szablon:

<button *ngFor="let [key, item] of Object.entries(items)" 
        (click)="itemClicked.emit([key, item.value])">
  {{ item.displayName }}
</button>

Maszynopis:

export interface DropDownItem {
  displayName: string,
  value: any,
  checked: boolean
}

@Component({ /* ... */ })
export class MyComponent {
  @Input() items: { [key: string]: DropdownItem };

  @Output() itemClicked = new EventEmitter<[string, any]>();

  Object = Object;

  constructor() { }
}
3
ZackDeRose 5 czerwiec 2018, 14:33

3 odpowiedzi

Najlepsza odpowiedź

Skończyło się na to w moim znaczniku; ts niezmieniony.

<button *ngFor="let key of Object.keys(items)"
        (click)="itemClicked.emit([key, items[key].value])">
  {{ items[key].displayName }}
</button>

Nadal chciałbym, aby nie zniszczyć obiektów.

Znalazłem Ta prośba o funkcję z kilku lat temu proszę o definicję w * NGFOR Składnia, I powiedzieli, że przekazują tę funkcję .... ale naprawdę mam nadzieję, że rozważają ponowne otwarcie.

3
ZackDeRose 10 czerwiec 2018, 15:08

Alternatywnym rozwiązaniem jest użycie kątowej KeyvaluePipe:

<button *ngFor="let entry of items | keyvalue" 
        (click)="itemClicked.emit([entry.key, entry.value.value])">
  {{ entry.value.displayName }}
</button>

Jest to nieco bliżej oryginału, chociaż wpis nadal nie jest zniszczony.

0
River 23 kwiecień 2020, 00:12

Technicznie nie musisz zniszczyć w ogóle, aby użyć pary kluczy i wartości (choć nie jest to świetny styl-mądry):

<button *ngFor="let entry of Object.entries(items)" 
        (click)="itemClicked.emit([entry[0], entry[1].value])">
  {{ item.displayName }}
</button>
0
River 23 kwiecień 2020, 00:46