带有 ngSwitch 的条件按钮也带有来自异步管道数组的 ngFor

Question

我有一个似乎无法修复的逻辑错误，但除了文字逻辑错误外，为什么 Angular 不让我这样做？

进行条件切换的原因是我想要不同型号、性别等的下拉菜单。我的性别下拉菜单为 drop.Name，但我只在下拉菜单中看到 [object object]当它呈现时。

传入代码：

<drop-down [Content]="GenderTxt" [AriaLabel]="'Gender Select'" [Type]="'Gender'" [Options]="(MenuOptions | async)?.Genders"
            (Click)="SetGender($event)">
          </drop-down>

错误信息：

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("aria-labelledby="{{AriaLabel}}">
    <div [ngSwitch]="Type">
      <button *ngSwitchCase="Gender" [ERROR ->]*ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}"): ng:///AppModule/DropDownComponent.html@6:37
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}}</button>
      <button *ngSwitchDefault [ERROR ->]*ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop}}</bu"): ng:///AppModule/DropDownComponent.html@7:31

代码：

<div class="dropdown-menu" attr.aria-labelledby="{{AriaLabel}}" [ngSwitch]="Type">
    <button *ngSwitchCase="Gender" *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}}</button>
    <button *ngSwitchDefault *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop}}</button>
  </div>

本质上是我的问题，我需要将开关盒移到外层 div，然后为每个按钮创建一个新的 div?

Answer 1

不能在同一个元素上使用两个结构指令。试试这个：

<div class="dropdown-menu" attr.aria-labelledby="{{AriaLabel}}" [ngSwitch]="Type">
    <ng-container *ngSwitchCase="Gender">
        <button *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}}</button>
    </ng-container>
    <ng-container *ngSwitchDefault>
        <button *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop}}</button>
    </ng-container>
</div>

带有 ngSwitch 的条件按钮也带有来自异步管道数组的 ngFor

Conditional Buttons with ngSwitch also with ngFor from async piped array

components

angular2-directives

angular