角度下拉/数据绑定

Question

我试图弄清楚如何从下拉列表中动态选择文本字段。我有一个 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.'
      },

    ]
}

编辑。我也希望在不使用剑道 UI 的情况下做到这一点，因此这个 stackblitz 草图有没有办法用非剑道下拉菜单来做到这一点？ 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);
    }
}

主要介绍一个filter和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>

和应用组件

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）的其他人