javascript - Angular 下拉/数据绑定(bind)

我试图弄清楚如何从下拉列表中动态选择文本字段。我有一个指向stackblitz草图的链接。理想情况下，我想从数组或json文件中提取数据。我尝试以各种方式制作不同的过滤器/键值管道和数据绑定-这是我最新的草图

https://stackblitz.com/edit/angular-fst8lm

基本上，我想从下拉列表中选择一项运动，然后根据数组中的信息填充一个div（一次只能选择一项运动-我可以吐出所有数据，但似乎很难获得ngFor / ngIf指令工作）-我曾经能够使用Angular1 / Angularjs轻松地做到这一点，但是我只是在加速Angular的当前版本-我已经浏览了文档和其他SO查询，但是找不到任何相关的-很奇怪似乎是一个简单的问题-任何建议表示赞赏

这是stackblitz链接中component.ts的一部分

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `

    <div class="example-wrapper">
    <p>Favorite sport:</p>
    <kendo-combobox [data]="listItems" [allowCustom]="allowCustom">
    </kendo-combobox>
    </div>

    <!-- this shows nothing-->
    <div *ngIf="listitems == true" >
    <div *ngFor="let data of sportdata">

    <h1>Sport name: {{data.sportname}}</h1>
    <h2>Sport rules: {{data.sportrules}}</h2>
    <h3>Notable athletes: {{data.sportPersons}}</h3>
    </div>
    </div>

    <!-- this shows something-->
    <div *ngFor="let data of sportdata">

    <h1>Sport name: {{data.sportname}}</h1>
    <h2>Sport rules: {{data.sportrules}}</h2>
    <h3>Notable athletes: {{data.sportPersons}}</h3>
    </div>


  `
})
export class AppComponent {
    public allowCustom: boolean = true;
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];

    public sportdata = [
      {
        position: 1, sportname: 'Basetball', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 2, sportname: 'Basketball', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 3, sportname: 'Cricket', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 4, sportname: 'Field Hockey', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 5, sportname: 'Football', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 6, sportname: 'Table Tennis', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 7, sportname: 'Tennis', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },
       {
        position: 8, sportname: 'Volleyball', sportrules: 'enter the specific rule set here.', sportPersons: 'Name of sports person/s.'
      },

    ]
}

编辑。我也希望在不使用kendo UI的情况下执行此操作，因此此stackblitz草图是否可以通过非kendo下拉菜单来执行此操作？ https://stackblitz.com/edit/angular-spor-select-revise-3-sans-kendo

最佳答案

我已经修改了您的代码：https://stackblitz.com/edit/angular-fst8lm-6zsqum

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: any): any {
        if (!items || !filter) {
            return [];
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.sportname.indexOf(filter) !== -1);
    }
}

主要介绍过滤器和ngModel数据绑定

 <p>Favorite sport:</p>
    <kendo-combobox [data]="listItems" [(ngModel)]="selectedSport" [allowCustom]="allowCustom">
    </kendo-combobox>
    </div>

 <!-- this shows something-->
    <div *ngFor="let data of sportdata | myfilter : selectedSport">

    <h1>Sport name: {{data.sportname}}</h1>
    <h2>Sport rules: {{data.sportrules}}</h2>
    <h3>Notable athletes: {{data.sportPersons}}</h3>
    </div>

和AppComponent

export class AppComponent {
    public allowCustom: boolean = true;
    selectedSport:any
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];