代码之家 › 专栏 › 技术社区 › mamesaye

Angular 4 Typeahead仅显示在对象数组中有匹配项的属性?

bootstrap-typeahead angular json arrays javascript

1

mamesaye · 技术社区 · 7 年前

我有一个JSON数组和两个排版频道和节目。显示值取决于所选频道的值。

allChannelShow = [    
{"channel":"tv","showname":["America","Friends","Night"]}, 
{"channel":"radio","showname":["360","pop","News","Special","Prime Time"]}, 
{"channel":"stream","showname":["All In","Reports","Deadline","series","Morning","Live","drama","comedy"]}   
]

我的.html文件

<div class="container">       
   <label for="channel">Channel 
     <input formControlName="channel" [typeahead]="allChannelShow" typeaheadOptionField="channel" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" 
      placeholder="Enter a channel name" required>                                  
   </label>              
</div>
<div class="container">     
  <label>Show                               
    <div *ngIf="channel"> 
      <input formControlName="show" [typeahead]="allChannelShow" typeaheadOptionField="showname" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" placeholder="Enter a show name" required>
</div>   </label> </div>

所以如果我选择:
radio ,第二个排版显示将有一个包含以下项目的选择列表:
["360","pop","News","Special","Prime Time"]
我可以选择一个特定的节目 News 或 360 或 pop 不是整个名单如果我选择:
tv ,前面第二个字体 shows 将有一个包含这些项目的选择列表: [ {"channel":"tv","showname":["America","Friends","Night]
我可以选择一个特定的节目 friends 不是整个名单

我怎样才能做到?

更新这里是 code 为了我现在拥有的。

1 回复 | 直到 7 年前

1

Kim Kern 7 年前

创建一个返回给定频道名称的显示名称的方法:

getShowNames(channel: string): string[] {
  const channelEntry = this.allChannelShow.find(c => c.channel === channel);
  return channelEntry ? channelEntry.showname : [];
}

为输入分配一个模板变量,以便检索其值

<input #channelInput formControlName="channel" [typeahead]="allChannelShow" typeaheadOptionField="channel" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0">
       ^^^^^^^^^^^^^

使用方法和当前选定的通道动态设置自动完成值。

<input formControlName="show" [typeahead]="getShowNames(channelInput.value)" typeaheadOptionField="showname" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" placeholder="Enter a show name" required>
                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

试试这个 stackblitz .