Угловой выпадающий / привязка данных

Question

Я пытаюсь понять, как динамически выбирать текстовое поле из выпадающего списка.У меня есть ссылка на набросок стекаблиц.В идеале я хочу получить данные из массива или файла JSON.Я пытался по-разному создавать различные каналы фильтра / значения ключа и привязку данных - вот мой самый последний набросок

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

. В основном я хочу выбрать вид спорта из раскрывающегося списка изаполнять div на основе информации в массиве (только один выбранный вид спорта за раз - я могу выплевывать все данные, но, похоже, у меня возникают проблемы с работой директив ngFor / ngIf) - раньше я мог легко это делать сAngular1 / Angularjs, но я только набираю скорость, чтобы ускорить текущую версию Angular - я просмотрел документы и другие SO-запросы, но не смог найти ничего уместного - странно, поскольку это кажется таким простым вопросом - любой совет приветствуется

здесь часть 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.'
      },

    ]
}

edit .Я также хочу сделать это без использования интерфейса кендо, следовательно, этот эскиз стекаблица Есть ли способ сделать это с раскрывающимся списком без кендо?https://stackblitz.com/edit/angular-spor-select-revise-3-sans-kendo

Answer 1

Я изменил ваш код: 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 2

С добротой благодаря помощи Indrkumara и user3250 Вот финальная версия выпадающего списка спортивных селекторов, который я пытался создать

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

надеюсь, это будетпомогите кому-нибудь еще, выходящему из Angularjs / v1 и желающему набрать скорость с новой версией Angular (v6 на данный момент)

Answer 3

Я создал 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);
}

Надеюсь, это даст лучшее понимание того, что нужно сделать.