Ng-repeat-start in angular2 - aka wiederhole mehrere Elemente mit NgFor

Ich muss mehrmals wiederholt li-Elemente in einer Liste in Angular2 für jedes Element. In angular 1.x I verwendet ng-repeat-start und ng-repeat-end. Ich kann nicht den richtigen Weg finden, um es in Winkel 2. Es gibt einige ältere blog-Beiträge über diese, aber Ihre Vorschläge nicht funktionieren, in der neuesten beta-Version von Angular2.

Alle <li>-Elemente, die wiederholt werden soll, für jede Kategorie:
(was ich normalerweise tun würde, mit dem Attribut *ngFor="#category of categories" - aber ich kann nicht finden, wo es...

Helfen?

<ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">
        {{ category.title }}
    </li>
    <li>
        <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>

    <li class="dropdown-header">Alle musikstykker</li>
    <li><a href="/music/all">Alle musikstykker</a></li>
</ul>

InformationsquelleAutor der Frage skovmand | 2015-12-30

  1. 39

    Wenn Sie möchten, wiederholen der Inhalte, Nutzung der template tag, und entfernen Sie die * Präfix auf ngFor.

    Laut Victor Savkin auf ngFor und templates:

    Eckige behandelt template-Elemente in einer besonderen Art und Weise. Sie werden verwendet, um
    erstellen von Ansichten, Teile von DOM können Sie dynamisch zu manipulieren. *
    syntax ist eine Verknüpfung, können Sie vermeiden, schreiben die ganze
    element.

    <ul class="dropdown-menu" role="menu">
   <template ngFor #category [ngForOf]="categories">
    <li class="dropdown-header">
        {{ category.title }}
    </li>
    <li>
        <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>

    <li class="dropdown-header">Alle musikstykker</li>
    <li><a href="/music/all">Alle musikstykker</a></li>
    </template>
</ul>

    Update eckig ^2.0.0

    Können Sie ng-container und ändern Sie einfach #var zu let var.

    <ng-container> verhält sich ähnlich wie der <template> aber ermöglicht, um die weitere gemeinsame syntax.

    <ul class="dropdown-menu" role="menu">
  <ng-container *ngFor="let category of categories">
    <li class="dropdown-header">
      {{ category.title }}
    </li>
    <li>
      <a href="{{ '/music/' + tag.keyword }}" *ngFor="let tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>

    <li class="dropdown-header">Alle musikstykker</li>
    <li><a href="/music/all">Alle musikstykker</a></li>
  </ng-container>
</ul>

    InformationsquelleAutor der Antwort pixelbits

  2. 3

    In den neueren Versionen funktioniert es so:

    <ul class="dropdown-menu" role="menu">
  <template ngFor let-category [ngForOf]="categories">
    <li class="dropdown-header">
        {{ category.title }}
    </li>
    <li>
        <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>

    <li class="dropdown-header">Alle musikstykker</li>
    <li><a href="/music/all">Alle musikstykker</a></li>
  </template>
</ul>

    --> lassen-Kategorie statt #Kategorie

    InformationsquelleAutor der Antwort user1879408

  3. 2

    Dank für deine Mühe, pixelbits, doch die Antwort war anders.

    Lesen über die Sternchen in Template-Syntax in das Eckige.io-guides gibt Ihnen die Ahnung.

    Diese es gelöst:

    <template ngFor #category [ngForOf]="categories">
    <li class="dropdown-header">
        {{ category.title }}
    </li>
    <li>
        <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>
</template>

    InformationsquelleAutor der Antwort skovmand

  4. 0

    Arbeitete mit 5.2.x

    <ng-template ngFor let-category [ngForOf]="categories">
  <label class="value-fields_label">{{ category.name }}</label>
  <h3 class="value-fields_value">{{ category.title }}</h3>
</ng-template>

    InformationsquelleAutor der Antwort Rahmathullah M

Schreibe einen Kommentar