javascript - angular 4 typeahead 仅显示在对象数组中具有匹配项的属性？

Question

我有一个 json 数组和两个预先输入的 channel 和节目。 show 的值取决于所选 channel 的值。

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，第二个 typeahead 节目将有一个包含以下项目的选择列表:
["360","pop","News","Special","Prime Time"]
我将能够选择一个特定的节目，例如 News 或 360 或 pop 而不是整个列表如果我选择:
tv，第二个 typeahead shows 将有一个包含这些项目的选择列表:[ {"channel":"tv","showname":["America""老友记","夜晚]
我将能够选择一个特定的节目，例如 friends 而不是整个列表

我怎样才能让它发生？

更新这是 code对于我现在所拥有的。

Answer 1

创建一个返回给定 channel 名称的节目名称的方法:

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

使用方法和当前选择的 channel 动态设置自动完成值。

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

在这个 stackblitz 中尝试一下.