Angular2 Vorlage: wie wrap Inhalt ngFor mit DIV

Ich habe ungewisse Anzahl von Spalten und eine Undefinierte Länge der Felder. Anzeige es gibt in diesem code:

<div class="col-md-6" *ngFor="let d of fields">
    <div class="form-group">
        <label>{{ d.displayName }}</label>
        <span>{{ viewRecord[d.fieldName]}}</span>
    </div>
</div

Ist das Ergebnis :

<div class="col-md-6">
    <div class="form-group">
        <label>Title 1</label>
        <span>Text 1....</span>
    </div>
</div
<div class="col-md-6">
    <div class="form-group">
        <label>Title 2</label>
        <span>Text 2....</span>
    </div>
</div

Gibt es irgendeine Möglichkeit, diese beiden in einem container wie diese:

<div class="row">
   <div class="col-md-6">
        <div class="form-group">
            <label>Title 1</label>
            <span>Text 1....</span>
        </div>
    </div
    <div class="col-md-6">
        <div class="form-group">
            <label>Title 2</label>
            <span>Text 2....</span>
        </div>
    </div
</div>

Bitte beachten Sie, dass ich nicht weiß, Anzahl der Felder, so habe ich, um E-Modul 2 von der Gesamtzahl der Felder zu wickeln paar Felder in einem container. Es ist offensichtlich, dass die wrapper werden außerhalb des Zyklus. Ich bin hängen geblieben 🙂

Beachten Sie, dass ich bin auf der Suche nach Vorlage-driven Antwort. Wenn es nicht, ich kann es verkraften. JavaScript kann ich selber Schreibe 😉

InformationsquelleAutor Roberc | 2017-01-11
  1. 5

    Können Sie mithilfe der integrierten Funktionen von *ngFor, odd und even Elemente. Iterate items wie gewohnt, aber zeigen, ergeben sich nur dann, wenn die Iteration von even Element. Und mit index Zugriff auf Artikel, die direkt von items.

    <div class="row">
    <div *ngFor="let d of fields; let index=index; let odd=odd; let even=even;">
        <div *ngIf="even">
            <div class="form-group" class="col-md-6">
                <label>{{ fields[index].displayName }}</label>
                <span>{{ viewRecord[fields[index].fieldName]}}</span>
            </div>
            <div class="form-group" class="col-md-6">
                <label>{{ fields[index+1].displayName }}</label>
                <span>{{ viewRecord[fields[index+1].fieldName]}}</span>
            </div>
        </div>
    </div>
</div>

    Es ist definitiv nicht die beste Lösung (da ich die Definition die gleiche Vorlage zweimal), aber sollte funktionieren.

    • Dies kann zu arbeiten 🙂 ich werde versuchen, fire it up und write-back
    • Ja, das ist nicht die beste, aber, wenn ich zu der zweiten Gruppe *ngIf="fields[index+1]", dann werde es genug sein 😉
    • Danke, Mann 🙂 Es hat funktioniert.
    • Gut! :)..aber trotzdem ich denke, über mehr elegante Art und Weise.
    • Ok, nochmals vielen Dank. Nun werden diese Felder nicht in cascading wenn Sie Links ist höher als rechts.
    • Das ist ein CSS-Problem ist es nicht? Versuchen Sie, zu untersuchen, erzeugten DOM-und Sie sollten in der Lage sein, um zu sehen, wenn Klassen sind in der falschen Reihenfolge, dann das erwartete Ergebnis. Vielleicht <div class="form-group" class="col-md-6"> ist nicht perfekt und form-Gruppe sollten verschachtelt sein, um col-md-6 div?
    • Es ist ein CSS Problem. Ich konnte zu entfernen aus dem schwimmenden DIVs, aber das stylesheet ist nicht von mir - wollte nicht, um Veränderungen in der biiiiig (500 Kb) Datei. Es sollte umgeschrieben werden auf jeden Fall... Mit jQuery wäre es einfach - es gibt viele EqualHeight Skipte ich vorher benutzte. Aber Angular2 nicht wie jQuery viel. Und EqualHeights in einfachen JavaScript konnte ich nicht finden.
    • Habe ich analysiert den code und kam zu einer Schlussfolgerung - du bist der beste! Dies ist der eleganteste Weg, die zu bewältigen Unzulänglichkeiten Angular2 template-Sprache. Sehr originelle und intelligente Art und Weise zu denken. Nochmals vielen Dank, Mann. Du bist der beste! 🙂
    • Gerne helfen! 🙂 Hast du es geschafft, zu beheben, die CSS schon? als ich wies mit der richtigen div-Verschachtelung früher
    • Nein, ich sagte, dass ich nicht wollen, zu Graben, die CSS-Datei. Für jetzt, Ihre Lösung ist die beste 😉

    InformationsquelleAutor Petr Adam
Schreibe einen Kommentar