1

这就是场景：我有一个包含不同类型对象的对象数据数组。它可以是文本、选择或其他任何内容。在视图中，我有一个 *ngFor 来循环这些数据，它会根据类型生成一个对象。我可以选择 2 或 3 个，这取决于我收到的 json。这些选择，可以依赖于从另一个选项中选择一个选项。因此，第二个选项需要根据第一个选择进行更改。例如：

第一次选择包含工作列表：我选择选项“开发人员” 第二次选择包含用户列表：“它必须向我显示选择了该工作的用户”

我试图在这里创建一个示例：https ://stackblitz.com/edit/ng-select-qyt3fu

这是代码：

import {Component, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule, FormsModule} from '@angular/forms';
import {NgSelectModule, NgOption} from '@ng-select/ng-select';

@Component({
    selector: 'my-app',
    template: `
        <h1>Angular ng-select <small class="text-muted"><a target="_blank" href="https://github.com/ng-select/ng-select">Open in Github</a></small></h1>
        <div *ngFor="let item of data">

           <input *ngIf="item.type == 'text'" autocomplete="off" name="{{item.name}}" type="{{item.type}}" placeholder="{{item.label}}" [(ngModel)]="item.value">

          <br />
          <ng-select *ngIf="item.type == 'select'"
                    [items]="item.data"
                    bindLabel="label"
                    (change)="selectValue($event)"
                    placeholder="{{item.label}}"
                    [(ngModel)]="item.value">
          </ng-select>

        </div>

        <!--<p>
            Selected city: {{selectedCity | json}}
        </p>
        <p>
           Selected user: {{selectedUser | json}}
        </p>-->

        <hr />

        <div style="margin-top:300px"></div>
`
})
export class AppComponent {

    data = [
     {
        "id": 0,
        "name": "test",
        "label": "Test",
        "type": "text",
        "value": "Hello there"
      },{
        "id": 1,
        "name": "cities",
        "label": "Cities",
        "type": "select",
        "value": undefined,
        "data": [
          {id: 1, name: 'vilnius', label: 'Vilnius', reference: "job"},
          {id: 2, name: 'kaunas', label: 'Kaunas', reference: "job"},
          {id: 3, name: 'pavilnys', label: 'Pavilnys', reference: "job"},
          {id: 4, name: 'pabradė', label: 'Pabradė', reference: "job"},
          {id: 5, name: 'klaipėda', label: 'Klaipėda', reference: "job"}
        ]
      },{
        "id": 2,
        "name": "job",
        "label": "Job",
        "type": "select",
        "value": undefined,
        "reference": "cities",  
        "data": [
          {id: 0, name: 'developer', label: 'Developer', city: "Kaunas", item_reference: "kaunas", reference: "cities"},
          {id: 1, name: 'actor', label: 'Actor', city:"Pabradė", item_reference: "pabradė", reference: "cities"},
          {id: 2, name: 'lifeguard', label: 'Lifeguard', city:"Vilnius", item_reference: "vilnius", reference: "cities"},
          {id: 3, name: 'lawyer', label: 'Lawyer', city:"Pavilnys", item_reference: "pavilnys", reference: "cities"}
        ]
      },{
        "id": 3,
        "name": "users",
        "label": "Users",
        "type": "select",
        "value": undefined,
        "reference": "job",
        "data": [
          {id: 'anjmao', name: 'anjmao', label: 'Anjmao', job: "Actor", item_reference: "actor", reference: "job"},
          {id: 'varnas', name: 'tadeus_varnas', label: 'Tadeus Varnas', job: "Developer", item_reference: "developer", reference: "job"},
          {id: 'john', name: 'john', label: 'John', job: "Lawyer", item_reference: "lawyer", reference: "job"},
          {id: 'jason', name: 'jason', label: 'Jason', job: "Lawyer", item_reference: "lawyer", reference: "job"},
          {id: 'tom', name: 'tom', label: 'Tom', job: "Lifeguard", item_reference: "lifeguard", reference: "job"}
        ]
      }
    ] 

    selectedCity: any;
    selectedUser: any;
    comboHash: ISelectHash = {};

    constructor() {
      this.data.forEach(item => {
        this.comboHash[item.reference] = item.data;
      });
    }

    selectValue(event) {
      //console.log(event.reference);
      const newItems = this.data.filter(item => 
      {
        console.log(event.reference);
        item.name.includes(event.reference)
      });
      console.log(newItems);
      ///console.log(event, this.comboHash["job"]);
      //console.log(newItems);
    }

}
export interface ISelectHash {
    [name: string] : Array<any>;
}

在这种情况下：

我选择一个城市，第二个选择它过滤该城市的工作，然后我选择工作，第三个应该过滤具有该工作的用户。那可能吗？我还尝试使用哈希图使用过滤器函数进行过滤，但 newItems 始终为空。

4

0 回答 0