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

Question

我有一组 json 和两个预先输入的频道和节目。 show 的值取决于 channel selected 的值。

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> 

所以如果我 select :
radio，第二个提前显示将有一个 select 列表，其中包含以下项目：
["360","pop","News","Special","Prime Time"]
我将能够 select 一个特定的节目，例如 News 或 360 或 pop 而不是整个列表 如果我 select :
tv，第二个提前输入 shows 将有一个包含以下项目的 select 列表：[ {"channel":"tv","showname":["America","Friends","Night]
我将能够 select 一个特定的节目，例如 friends 而不是整个列表

我怎样才能实现它？

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

Answer 1

创建一个方法，returns 显示给定频道名称的名称：

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 中尝试一下。