Question

我创建了一个小的下拉组件，它将以下接口作为＆lt; option＆gt; s： interface DropdownSelectChoice { label：string; key：string; } 接受一维或二维选择数组的组件 @Input（）选项：DropdownSelectChoice [] | DropdownSelectChoice [] []; 如果传递了二维选择数组，则为每组选择创建未标记的＆lt; optgroup＆gt;：＆lt; span [class.disabled] =＆＃34;禁用＆＃34;＆gt; ＆lt; select（ngModelChange）=＆＃34;选择（$ event）＆＃34; [无效] =＆＃34;禁用＆＃34; [（ngModel）] =＆＃34; defaultChoice＆＃34;＆GT; ＆lt; ng-container * ngIf =＆＃34; choices [0] .constructor === Array＆＃34;＆gt; ＆lt; optgroup * ngFor =＆＃34;让一组选择＆＃34; [标号] =＆＃34;空＆＃34;＆GT; ＆lt; option * ngFor =＆＃34;让我们选择＆＃34; [值] =＆＃34; choice.key＆＃34;＆GT; {{choice.label}} ＆LT; /选项＆GT; ＆LT; / OPTGROUP＆GT; ＆LT; / NG-容器＆GT; ＆lt; ng-container * ngIf =＆＃34; choices [0] .constructor！== Array＆＃34;＆gt; ＆lt; option * ngFor =＆＃34;选择选项＆＃34; [值] =＆＃34; choice.key＆＃34;＆GT; {{choice.label}} ＆LT; /选项＆GT; ＆LT; / NG-容器＆GT; ＆LT; /选择＆GT; ＆LT; /跨度＆GT; 如果我将它传递给一维数组，它按预期工作：选项：DropdownSelectChoice [] = [ { label：＆＃34; One＆＃34;，关键：＆＃34; 1＆＃34; }， { label：＆＃34; Two＆＃34;，关键：＆＃34; 2＆＃34; } ]。如果我传递一个二维数组： choicesGroup：DropdownSelectChoice [] [] = [ [ { label：＆＃34; One＆＃34;，关键：＆＃34; 1＆＃34; }， { label：＆＃34; Two＆＃34;，关键：＆＃34; 2＆＃34; } ] [ { 标签：＆＃34;三＆＃34;，关键：＆＃34; 3＆＃34; }， { label：＆＃34; Four＆＃34;，关键：＆＃34; 4＆＃34; } ] ]。我得到的选项组长为空白＆lt;选项＆gt; s，没有＆lt; optgroup＆gt;。在下拉组件的初始化程序中设置断点，我确认this.choices [0] .constructor === Array在传递choicesGroup时为true，但模板似乎总是在评估！==数组模板路径。我没有注意到什么愚蠢的东西？

Answer 1

在模板中不能以这种方式使用类型。

尝试

<ng-container *ngIf="!choices[0].isArray">

constructor === Array

如果您仍想使用<ng-container *ngIf="isArray(choices[0])">，则需要创建方法并在那里进行比较。

isArray(obj) {
  return obj.constructor === Array;
}

{{1}}

Answer 2

为了完整起见 - 根据君特接受的答案，这些是我的最终修改：

private grouped: boolean;

ngOnInit() {
    this.grouped = this.choices[0].constructor === Array;
}

在模板中，我将ng-container的条件更改为：

<ng-container *ngIf="grouped">...</ng-container>
<ng-container *ngIf="!grouped">...</ng-container>

带有条件</option> <optgroup>的动态<select> <option>，因为ng-container不起作用

2 个答案: