ngSwitchの条件付きボタンとngFor with async piped array

Question

私は修正できないような論理エラーがありますが、リテラルロジックエラーを除いて、なぜAngularはこれをやりませんか？

私はジェンダーをdrop.Nameでドロップダウンしていますが、レンダリング時に[オブジェクトオブジェクト]がドロップダウンに表示されるだけです。

着信コード：

<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

同じ要素に2つの構造ディレクティブを使用することはできません。代わりにこれを試してみてください：

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