angular2 не может иметь несколько привязок шаблонов к одному элементу

#javascript #angular

Вопрос:

У меня есть этот шаблон angular2:

 <template *ngIf="alerts.length > 0">
<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
  {{ alert?.msg }}
</alert>
  </template>

Я получаю эти ошибки:

 zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * (" </div>
  <div *ngSwitchCase="false" class="container p-t-10">
    <alert *ngIf="alerts.length > 0" [ERROR ->]*ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert"): b@5:37

в чем проблема, я помещаю * ngIf и * ngFor в разные элементы html. Это должно сработать. нет?

и:

 Can't bind to 'type' since it isn't a known property of 'alert'. (""container p-t-10">
    <alert *ngIf="alerts.length > 0" *ngFor="let alert of alerts;let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)">
      {{ alert?.msg }}
    </alert>
"): b@5:80

Я добавил

*ngIf="alerts.length > 0 чтобы избежать случаев alert = [] . Как я могу это исправить иначе?

Ответ №1:

* В *ngFor позволяет Angular добавлять <template> тег. В <template> теге это не имеет смысла, и поэтому здесь структурные директивы имеют другой синтаксис.

 <template ngFor [ngForOf]="alerts" let-alert let-i="index">

Поскольку разный синтаксис для почти одного и того же в разных местах вызвал некоторую путаницу, команда Angular недавно представила

 <ng-container>

это похоже на <template> тег (не добавляется в DOM), но допускает более общий синтаксис

 <ng-container *ngIf="alerts.length > 0">
  <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
    {{ alert?.msg }}
  </alert>
</ng-container>

1. эта проверка пустого массива также исправит Can't bind to 'type' since it isn't a known property of 'alert' ?

2. все еще получаю эту ошибку: Can't bind to 'type' since it isn't a known property of 'alert'. (" <ng-container *ngIf="alerts.length > 0"> <alert *ngFor="let alert of alerts;let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)"> {{ alert?.msg }} </alert> "): b@6:54

3. Вероятно, вам не хватает импорта или объявления в, @NgModule({imports: [ModuleThatContainsAlert], declaration: [AlertComponent]) зависимости от того, откуда <alert> поступает. Сообщение об ошибке указывает на то, что для этого элемента не AlertComponent создан экземпляр.

4. public alerts:Array<Object> = []; является членом клуба. Я думал, ошибка в том, что массив был пуст в начале. думал, что * ngIf должен исправить это

5. Это потому, что <alert [type]=xxx потому что <alert> не имеет собственности type .

Ответ №2:

Вы должны использовать <ng-container> для этого случая. В качестве примера:

 <ng-container *ngIf="totalItems > 0">
      <tr *ngFor="let item of outputs| paginate: { id:'ab', itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems  }; let $index = index">
        <td>{{item.x}}</td>
        <td>{{item.y | date: 'MMMM d, y, h:mm:ss a' }}</td>
        <td>{{item.z}}</td>
        <td>{{item.r}}</td>

      </tr>
    </ng-container>
    <ng-container *ngIf="totalItems > 10">
      <tr *ngFor="let item of outputs| paginate: { id:'aabbbbbbbbb', itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems  }; let $index = index">
            <td>{{item.x}}</td>
        <td>{{item.y | date: 'MMMM d, y, h:mm:ss a' }}</td>
        <td>{{item.z}}</td>
        <td>{{item.r}}</td>
      </tr>
    </ng-container>