ng: не может иметь несколько привязок шаблона к одному элементу. Используйте только один атрибут с именем шаблона или с префиксом *

Question

Я использую angular5, я не могу использовать * dropdownMenu с * ngFor, я получаю эту ошибку:

ng : Can't have multiple template bindings on one element . Use only one attribute named template or prefixed with *

Это код:

<div class="btn-group" dropdown>
        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="ListUsers()">
          List of users <span class="caret"></span>
        </button>
        <ul *dropdownMenu class="dropdown-menu" role="menu" *ngFor="let c of listUsers">
          <li role="menuitem"><a class="dropdown-item">{{c.Firstname}} {{c.lastName}}</a></li>
        </ul>
      </div>

как я могу решить эту проблему?

Answer 1

Can't have multiple template bindings on one element означает, что директивы *dropdownMenu и *ngIf не могут быть вместе в одном элементе, поскольку обе являются структурными директивами.

(отметки * указывают, что они являются структурными директивами)

РЕДАКТИРОВАТЬ (решение):

применить *ngFor на li, а не на ul.

<div class="btn-group" dropdown>
        <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="ListUsers()">
          List of users <span class="caret"></span>
        </button>
        <ul *dropdownMenu class="dropdown-menu" role="menu" >
            <li role="menuitem" *ngFor="let c of listUsers">
                <a class="dropdown-item">
                 {{c.Firstname}} {{c.lastName}}
               </a>
            </li>
        </ul>
      </div>