Öffnen Sie das erste angeschlossene Erweiterungsfeld in einem Angular Material-Akkordeon

Lesezeit: 3 Minuten

Benutzeravatar von Aaron Hazelton
Aaron Hazelton

Natürlich können Sie die Eingabe verwenden expanded in einem Angular Material-Erweiterungspanel, um standardmäßig ein bestimmtes Panel zu öffnen, das beim Laden geöffnet wird. Ich habe jedoch ein Akkordeon, bei dem alle Erweiterungsfelder dynamisch generiert werden und alle optional sind, aber ich möchte, dass das erste Feld geöffnet wird.

Ich könnte jeden meiner durchgehen ngFors, die Vorlagen verwenden, um die Panels zu generieren, um zu sehen, ob sie vorhanden sind, und dann beim ersten Index das Attribut hinzufügen, aber es gibt mehrere Schleifen, die Vorlagen einziehen, und es scheint chaotisch zu sein. Ich möchte in der Lage sein, etwas Eigentum von der zu greifen mat-accordion Nachdem die Ansicht abgeschlossen ist, um zu sehen, welches das erste ist, das an das Akkordeon angehängt ist, und fügen Sie das Attribut hinzu, aber es sieht so aus, als wäre dies nicht möglich. Weiß jemand, ob es eine Möglichkeit gibt, dies zu tun?

Benutzeravatar von Kalamarico
Kalamarico

Sie können verwenden first Variable, ich habe einen Stackblitz gemacht, wie Sie sehen können hier.

Sie können dies folgendermaßen tun:

<mat-accordion class="example-headers-align">
  <mat-expansion-panel *ngFor="let item of [1,2,3]; first as isFirst" [expanded]="isFirst">
    <mat-expansion-panel-header>
      <mat-panel-title> {{item}} </mat-panel-title>
    </mat-expansion-panel-header>
    {{item}}
  </mat-expansion-panel>
</mat-accordion>

Du kannst sehen hier die Verwendung der *ngFor Variablen für weitere Informationen.

  • Danke für den Beitrag, siehe Kommentar oben.

    – Aaron Hazelton

    26. Oktober 2018 um 18:07 Uhr

  • Sie haben also 1 Mattenakkordeon und innen haben Sie etwas * ngFor auf eine Mattenerweiterungsplatte aufgetragen. Ist das richtig? (1 Ziehharmonika und innen X-Matten-Ausbauplatten)

    – Kalamarico

    26. Oktober 2018 um 18:29 Uhr

  • Ich verstehe, eine andere Möglichkeit, die ich denke, ist, dass Sie eine benutzerdefinierte Direktive erstellen und sie im Mat-Expansion-Panel mit ngFor verwenden können. In dieser Direktive können Sie einen statischen Zähler verwenden und ein ++ auf den Zähler setzen, wenn er gerendert wird, also wird das erweiterte attr auf wahr gesetzt, wenn dieser Zähler der erste ist … Wenn ich kann, werde ich ein Beispiel zeigen

    – Kalamarico

    26. Oktober 2018 um 18:49 Uhr

  • Gute Idee. Ich werde zuerst sehen, wie “must have” das ist. Vielen Dank!

    – Aaron Hazelton

    26. Oktober 2018 um 19:13 Uhr

  • Sie können eine statische Klasse zum Erstellen innerhalb des Zählers verwenden und sie in die Direktive importieren (und sie zum Summieren verwenden) und auch in die Komponente importieren (um sie in der Vorlage zu verwenden). Ich hoffe, Ihr Problem zu lösen, wenn Sie haben Probleme, kommentiere erneut! 😉

    – Kalamarico

    26. Oktober 2018 um 19:16 Uhr

Haben Sie versucht, die lokale Variable ngFor “first” zu verwenden? Auf diese Weise:

<mat-accordion>
    <mat-expansion-panel *ngFor="let elem of elements; let isFirst = first" [expanded]="isFirst">
         <!--- Something Here --->
    </mat-expansion-panel>
</mat-accordion>

  • Guter Punkt, ich habe isFirst vergessen und wollte den Index verwenden, aber das würde immer noch bedeuten, dass ich unnötige Überprüfungen durchführen müsste, da es, wie ich bereits erwähnt habe, mehrere ngFors gibt und sie alle optional sind, sodass ich nicht wissen kann, welche erscheint zuerst im DOM. Deshalb hatte ich auf eine Möglichkeit gehofft, die Panels direkt von der Akkordeon-Komponente zu bekommen. Denke das ist nicht möglich. Danke für die Eingabe!

    – Aaron Hazelton

    26. Oktober 2018 um 18:03 Uhr

Benutzeravatar von manjit singh
manjit singh

....
<mat-accordion [formGroupName]="blockIndex"   multi>
  <mat-expansion-panel [expanded]="blockIndex==0" >
....

Es öffnet standardmäßig das erste Bedienfeld, wenn mit einem reaktiven Formulararray in Winkel (+2) gearbeitet wird.

1430190cookie-checkÖffnen Sie das erste angeschlossene Erweiterungsfeld in einem Angular Material-Akkordeon

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy