Angular 2: Verwendung von ngIf innerhalb ngFor nicht

Arbeits

Ich habe die folgende ngFor Schleife:Angular 2: Verwendung von ngIf innerhalb ngFor nicht

<div *ngFor="let variety of varieties; let i=index"> 
    <div class="varietyTypeName"> 
     {{variety.VarietyTypeName}}    
    </div> 
</div

Welche der folgenden ausdruckt:

Greens 
Greens 
Greens 
Fruits

Ich möchte es nicht wiederholt drucken, so dass anstelle (in diesem Szenario), würde ich es gerne ausdrucken:

Greens 
Fruits

Die VarietyTypeNames wird immer im Array zusammen gruppiert. Wenn mehrere Greens vorhanden sind, werden sie immer nacheinander angezeigt. Könnte ich einfach eine ngIf innerhalb der Schleife verwenden und im Grunde nur sagen, es nur die VarietyTypeName anzuzeigen, wenn es nicht gleich der vorherigen VarietyTypeName ist?

Ich habe versucht, diese Logik unten zu implementieren, aber ich bekomme einen Fehler. Was mache ich falsch? Hier

<div *ngFor="let variety of varieties; let i=index"> 
    <div *ngIf="variety[i].VarietyTypeName != variety[i - 1].VarietyTypeName" class="varietyTypeName"> 
     {{variety.VarietyTypeName}} 
    </div> 
</div

ist die Fehlermeldung:

Kann nicht lesen Eigenschaft 'VarietyTypeName' undefinierter

Quelle

2016-10-19 Brett

Ich denke @Gunter ist richtig. Sie verwenden "let Varietät von Varietäten", aber Sie verwechseln es mit dem C-Style for Loop. Sie brauchen hier keinen Index, aber wenn Sie ihn verwenden möchten, dann sollten Sie anstelle von "variety [i]" 'variations [i]' verwenden, da letzteres Ihre Sammlung ist, während former ein Objekt in der Sammlung ist. –

versuchen, diese

<div *ngFor="let variety of varieties; let i=index"> 
    <div *ngIf="variety.VarietyTypeName != varieties[i - 1]?.VarietyTypeName" class="varietyTypeName"> 
     {{variety.VarietyTypeName}} 
    </div> 
</div

Quelle

2016-10-19 17:55:08

Dies gibt keine Instanz von VarietyTypeName – Brett

Ich habe geändert, was Sie in * ngIf = "Varietäten [i] ?. VarietyTypeName! = Sorte [i - 1] ?.VarietyTypeName "und es funktioniert jetzt. Was bedeutet das"? "? – Brett

@Brett Ich denke, das ist die eleganteste Antwort (obwohl es den Fehler hat, den Sie bereits behoben haben.) Das' Objekt? .Eigenschaft' sagt Angular um die Eigenschaft nur zu lesen, wenn das Objekt truthy ist (ist nicht 'null' oder' undefined') – BeetleJuice

Ich denke, es sollte sein

<div *ngFor="let variety of varieties; let i=index"> 
    <div *ngIf="variety.VarietyTypeName != i == 0 ? 0 : varieties[i - 1].VarietyTypeName" class="varietyTypeName"> 
     {{variety.VarietyTypeName}} 
    </div> 
</div

Quelle

2016-10-19 17:54:45

Das gibt mir den gleichen Fehler, den ich zuvor bekommen habe. – Brett

Sie sollten diese Art von Logik in Ihrem Controller tun.

Alle Duplikate aus dem Array filtern und dann einfach einfach darüber iterieren.

let filteredVarieties = varieties.filter((variety, index) { 
    return varieties.indexOf(variety) == index; 
});

Jetzt können Sie *ngFor über diesen neu geschaffenen filteredVarieties

Quelle

2016-10-19 17:56:46

Ist die Leistung besser, wenn ich mich in der Steuerung darum kümmere, wie Sie es vorschlagen? – Brett

Ich glaube nicht, dass es einen großen Unterschied in der Leistung geben wird Mance. Unsere Computer sind stark genug, um diese kleinen Aufgaben schnell genug zu bewältigen. Daher schlage ich vor, sich auf das Schreiben von besser lesbarem Code zu konzentrieren. Sie könnten dieses '.filter' in eine Funktion namens' removeDuplicates' einbinden und jeder neue Entwickler würde sofort verstehen, was der Code macht. –

In einer solchen Situation können Sie ein Rohr verwenden, um die Werte zu filtern, bevor über sie iterieren. Ich werde ein einfaches Rohr zeigen, das helfen kann. N.B Ich werde die Bibliothek lodash verwenden, um das Beispiel zu vereinfachen. immer würde in Winkel 2

import { Pipe, PipeTransform } from '@angular/core'; import * as _ from 'lodash'; @Pipe({ name: 'filter' }) class FilterPipe { transform(input: any, term: any) { return _.uniqBy(input, term) } }

Nachdem das Rohr, wie Sie den Import, das ist, wie Sie Ihre Template-Code

<div *ngFor="let variety of varieties | filter : 'VarietyTypeName' "> {{variety.VarietyTypeName}} </div

P. S Denken Sie daran haben würde lodash an Ihren Lieferanten Dateien hinzuzufügen.

Quelle

2016-10-19 20:26:42 koech

Angular 2: Verwendung von ngIf innerhalb ngFor nicht

Antwort

Verwandte Themen