Ich bin ein bisschen verwirrt darüber, wie man das key
und value
eines Objekts in angle2 während der Verwendung erhält*ngFor
zum Iterieren über das Objekt verwendet. Ich weiß, dass es in Angular 1.x eine Syntax wie gibt
ng-repeat="(key, value) in demo"
aber ich weiß nicht, wie ich das gleiche in angle2 machen soll. Ich habe etwas Ähnliches ohne Erfolg versucht:
<ul>
<li *ngFor='#key of demo'>{{key}}</li>
</ul>
demo = {
'key1': [{'key11':'value11'}, {'key12':'value12'}],
'key2': [{'key21':'value21'}, {'key22':'value22'}],
}
Hier ist ein Plnkr mit meinem Versuch: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
Wie kann ich key1
und key2
dynamisch mit *ngFor
? Nachdem ich ausgiebig gesucht hatte, kam mir die Idee, Rohre zu verwenden, aber ich weiß nicht, wie ich das anstellen soll. Gibt es ein eingebautes Rohr, um dasselbe in angle2 zu tun?
angular
typescript
object
Pardeep Jain
quelle
quelle
key, value
Paar Art von Syntax in Angular2ngFor
, sollten Sie sich diese AntwortPipe
.Antworten:
Haben
Object.keys
zugänglich in der Vorlage und verwenden Sie es in*ngFor
.quelle
*ngFor
s. Die ersten beiden verwendenobjectKeys
, innerlich keine Notwendigkeit (da es sich nur um ein Array handelt).Wie in der neuesten Version von Angular (v6.1.0) hat Angular Team eine neue integrierte Pipe mit dem gleichen Namen wie
keyvalue
Pipe hinzugefügt, mit der Sie Objekte, Karten und Arrays imcommon
Modul des Angular-Pakets durchlaufen können . Beispielsweise -Arbeitsgabel Beispiel
Weitere nützliche Informationen finden Sie hier -
Wenn Sie Angular v5 oder niedriger verwenden oder Pipe verwenden möchten, befolgen Sie diese Antwort
quelle
*ngFor="let item of testObject | keyvalue:keepOriginalOrder"
public keepOriginalOrder = (a, b) => a.key
Sie können eine benutzerdefinierte Pipe erstellen, um die Liste der Schlüssel für jedes Element zurückzugeben. So ähnlich:
und benutze es so:
Bearbeiten
Sie können auch einen Eintrag zurückgeben, der sowohl Schlüssel als auch Wert enthält:
und benutze es so:
quelle
keys.push({key: key, value: value[key]);
*ngFor
expression zu erstellen . Dies führt zu einem enormen Leistungsengpass, da die Sammlung jedes Mal generiert werden muss, wenn der Änderungsdetektor nach Änderungen sucht.pure:false
das Rohr hinzufüge , wird es sehr ineffizient. Haben Sie eine Lösung, um die Pipe manuell zu aktualisieren, wenn ich das Objekt ändere (Element entfernen)?common: NgFor has been removed as it was deprecated since v4. Use NgForOf instead. This does not impact the use of*ngFor in your templates.
( jaxenter.com/road-to-angular-5-133253.html )Aktualisieren
In 6.1.0-beta.1 KeyValuePipe eingeführt https://github.com/angular/angular/pull/24319
Plunker Beispiel
Vorherige Version
Ein anderer Ansatz besteht darin, eine
NgForIn
Direktive zu erstellen , die wie folgt verwendet wird:Plunker Beispiel
ngforin.directive.ts
quelle
Ab Angular 6.1 können Sie die Keyvalue- Pipe verwenden:
Es ist jedoch unpraktisch, die resultierende Liste nach dem Schlüsselwert zu sortieren. Wenn Sie etwas Neutrales brauchen:
Vergessen Sie nicht, das Attribut pure: false Pipe anzugeben . In diesem Fall wird die Pipe bei jedem Änderungserkennungszyklus aufgerufen, auch wenn sich die Eingabereferenz nicht geändert hat (dies ist der Fall, wenn Sie einem Objekt Eigenschaften hinzufügen).
quelle
Ausarbeitung der Antwort von @ Thierry anhand eines Beispiels.
Es gibt keine eingebaute Pipe oder Methode, um
key and value
aus der * ngFor-Schleife zu gelangen. Daher müssen wir für dasselbe eine benutzerdefinierte Pipe erstellen. Wie Thierry hier sagte, ist die Antwort mit Code.** Die Pipe-Klasse implementiert die Transformationsmethode der PipeTransform-Schnittstelle, die einen Eingabewert und ein optionales Array von Parameterzeichenfolgen verwendet und den transformierten Wert zurückgibt.
** Die Transformationsmethode ist für eine Pipe unerlässlich. Die PipeTransform-Schnittstelle definiert diese Methode und führt sowohl das Tooling als auch den Compiler. Es ist optional; Angular sucht und führt die Transformationsmethode unabhängig davon aus. Weitere Informationen zu Rohren finden Sie hier
und HTML-Teil ist:
Working Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview
Update auf RC
wie von user6123723 (danke) im Kommentar vorgeschlagen, ist hier ein Update.
quelle
@Marton hatte einen wichtigen Einwand gegen die akzeptierte Antwort mit der Begründung, dass die Pipe bei jeder Änderungserkennung eine neue Sammlung erstellt. Ich würde stattdessen einen HtmlService erstellen, der eine Reihe von Dienstprogrammfunktionen bereitstellt, die die Ansicht wie folgt verwenden kann:
quelle
Object.keys(...)
im * ngFor?TypeError: Cannot read property 'keys' of undefined
. Es scheint in der Vorlage nicht unterstützt zu werden.template
Option verwendet werden, sondern im tatsächlichen HTML-Code der Vorlage? dankeWenn Sie Lodash bereits verwenden, können Sie diesen einfachen Ansatz ausführen, der sowohl Schlüssel als auch Wert umfasst:
Fügen Sie in die Typoskriptdatei Folgendes ein:
und in der exportierten Komponente enthalten:
quelle
Vielen Dank für die Pipe, aber ich musste einige Änderungen vornehmen, bevor ich sie in Angular 2 RC5 verwenden konnte. Die Pipe-Importzeile wurde geändert und der Schlüsselarray-Initialisierung wurde ein beliebiger Typ hinzugefügt.
quelle
Keine der Antworten hier hat sofort für mich funktioniert. Hier ist, was für mich funktioniert hat:
pipes/keys.ts
Mit Inhalten erstellen :Hinzufügen zu
app.module.ts
(Ihrem Hauptmodul):und fügen Sie dann Ihrem Moduldeklarationsarray Folgendes hinzu:
Dann können Sie in Ihrer Ansichtsvorlage Folgendes verwenden:
Hier ist eine gute Referenz, die ich gefunden habe, wenn Sie mehr lesen möchten.
quelle
#
usw. gegeben wurde, ist Ihre Antwort zweifellos auch richtigEs gibt eine wirklich schöne Bibliothek, die dies unter anderen schönen Pfeifen tut. Es heißt ngx-pipes .
Beispielsweise gibt die Schlüsselpipe Schlüssel für ein Objekt und die Wertepipe Werte für ein Objekt zurück:
Schlüsselrohr
Werte Rohr
Sie müssen keine eigene Pipe erstellen :)
quelle
Index verwenden:
Verwendungszweck:
quelle
Hier ist die einfache Lösung
Hierfür können Sie Typoskript-Iteratoren verwenden
quelle
Ändern Sie den Demo-Typ in Array oder iterieren Sie über Ihr Objekt und verschieben Sie es in ein anderes Array
und von html:
quelle
Ich denke, Object.keys ist die beste Lösung für dieses Problem. Für alle, die auf diese Antwort stoßen und herausfinden möchten, warum Object.keys ihnen ['0', '1'] anstelle von ['key1', 'key2'] gibt, ist eine warnende Geschichte - achten Sie auf den Unterschied zwischen " von "und" in ":
Ich habe bereits Object.keys verwendet, etwas Ähnliches:
Anstelle von
Ich hatte versehentlich geschrieben
das "funktionierte" einwandfrei ohne Fehler und kehrte zurück
Das hat mich ungefähr 2 Stunden gekostet, zu googeln und zu fluchen.
(schlägt auf die Stirn)
quelle
Sie können den Schlüssel eines dynamischen Objekts erhalten, indem Sie dies versuchen
quelle
Sie müssen es vorerst so machen, ich weiß nicht sehr effizient, da Sie das Objekt, das Sie von Firebase erhalten, nicht konvertieren möchten.
quelle