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