web-dev-qa-db-ja.com

angle2のNGリピートスタート-別名NgForを使用して複数の要素を繰り返す

Angular2のリスト内のいくつかのli要素をアイテムごとに繰り返す必要があります。 In angular 1.xを使用しましたng-repeat-startおよびng-repeat-end このため。 Angular 2.で正しい方法を見つけることができません。これについて 古いブログの投稿があります が、提案はありませんtは、Angular2の最新ベータで動作します。

すべて <li>- elementsは、各カテゴリに対して繰り返す必要があります：（通常、属性*ngFor="#category of categories"-しかし、私はそれを置く場所を見つけることができません...

助けて？

<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>
angularangular2-template
25
skovmand

内容を繰り返したい場合は、templateタグを使用し、ngForの*プレフィックスを削除します。

Victor Savkin on ngForおよびtemplatesによると：

Angularは、テンプレート要素を特別な方法で扱います。ビュー、動的に操作できるDOMのチャンクを作成するために使用されます。 *構文は、要素全体を記述しないようにするショートカットです。

<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>

更新angular ^ 2.0.0

ng-containerを使用して、#varをlet varに変更するだけです。

<ng-container>は<template>と同じように動作しますが、より一般的な構文を使用できます。

<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>
52
pixelbits

新しいバージョンでは、次のように機能します。

<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>

-> let-category＃categoryの代わりに

4
user1879408

あなたの努力、pixelbitsをありがとう、しかし答えは異なっていた。

Angular.ioガイドのテンプレート構文 でアスタリスクについて読むと、手がかりが得られます。

これで解決しました：

<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>
2
skovmand

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>
1
Rahmathullah M