Angular 下拉菜单/数据绑定

Question

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

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

基本上我想从下拉列表中 select 一项运动，然后根据数组中的信息填充 div（一次只有一项 selected 运动 -我可以吐出所有数据，但似乎无法使 ngFor/ngIf 指令正常工作）-我以前可以使用 Angular1/Angularjs 轻松完成此操作，但我刚刚开始加快当前版本 Angular - 我已经浏览了文档和其他 SO 查询但找不到任何相关的东西 - 奇怪的是它看起来很简单 - 任何建议表示赞赏

这是来自 stackblitz link

的 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 sketch 有没有办法使用非 kendo 下拉列表来执行此操作？ https://stackblitz.com/edit/angular-spor-select-revise-3-sans-kendo

Answer 1

我在这里创建了 Stacblitz：https://stackblitz.com/edit/angular-fst8lm-dakynu

变量 listItems 不是布尔值，因此以下条件不成立。

<!-- this shows nothing-->
<div *ngIf="listItems == true" >

更改为 <div *ngIf="listItems.length>0" >，作品已在 Stackblitz 中更新。

要获得选定的运动，您需要一个变量和组合框的 selectionChange 事件，如下所示：

HTML:

<kendo-combobox (selectionChange)="changeSport($event)" [data]="listItems" [allowCustom]="allowCustom">
</kendo-combobox>

.ts:

changeSport(e){
  console.log(e);

  this.selectedSport = this.sportdata.find(f=>f.sportname == e);
  console.log(this.selectedSport);
}

希望这能让您更好地了解需要做什么。

Answer 2

我修改了你的代码：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"];

Answer 3

感谢 Indrkumara 和 user3250 的帮助这是我尝试创建的运动选择器下拉列表的最终版本

https://stackblitz.com/edit/angular-sport-select-revision-6

希望它能帮助来自 Angularjs/v1 并希望跟上 Angular 新版本（目前为 v6）

的任何其他人

Angular 下拉菜单/数据绑定

Angular dropdown/ databinding

javascript

data-binding

angular-ng-if

ngfor

angular