nz-dropdown-menu вызывается из * ngFor - PullRequest
Новая
       10

nz-dropdown-menu вызывается из * ngFor

0 голосов
/ 03 июля 2019

У меня есть простой ngFor, и я хотел бы, чтобы у каждой записи была кнопка с выпадающим списком, и каждый пункт меню должен вызывать отдельную функцию для определенного элемента в ngFor.

Приведенный ниже код работает, и я ожидаю такого поведения. 

<div *ngFor="let order of orders">

          <nz-dropdown>
              <button nz-button nz-dropdown [nzType]="'primary'" nzGhost>
                  <span>Almighty Dropdown</span><i nz-icon nzType="ellipsis"></i>
              </button>
              <ul nz-menu>
                  <li nz-menu-item (click)="fc1(order)">Function 1</li>
                  <li nz-menu-item (click)="fc2(order)">Function 2</li>
              </ul>
            </nz-dropdown>
</div>

Однако я получаю ошибку:

ng-zorro-antd-core.js: 658 [NG-ZORRO]: устарело: компонент 'nz-dropdown' будет удален в 9.0.0. Пожалуйста, используйте вместо этого nz-dropdown-menu.

Код, предложенный NG-ZORRO: 

<button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item>
      <a>1st item</a>
    </li>
    <li nz-menu-item>
      <a>2nd item</a>
    </li>
    <li nz-menu-item>
      <a>3rd item</a>
    </li>
  </ul>
</nz-dropdown-menu>

Если я использую код, предложенный NG-ZORRO в документации, как я могу передать элемент 'order' из ngFor в 'clicks' в подменю?

1 Ответ

1 голос
/ 04 июля 2019

Передайте order функции click в качестве первого примера кода, и он все еще работает. 

<div class="order" *ngFor="let order of orders">
    {{order.name}}
    <button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>
          <a href="javascript:void(0)" (click)="fc1(order)">1st item</a>
        </li>
        <li nz-menu-item>
          <a href="javascript:void(0)" (click)="fc2(order)">2nd item</a>
        </li>
        <li nz-menu-item>
          <a href="javascript:void(0)" (click)="fc3(order)">3rd item</a>
        </li>
      </ul>
    </nz-dropdown-menu>
</div>

Вы можете проверить этот пример: https://stackblitz.com/edit/ng-zorro-antd-start-hnxupx

...