Проблема с привязкой данных с помощью ngModel между 3 выпадающими опциями выбора. (Угловой) - PullRequest
Новая
       28

Проблема с привязкой данных с помощью ngModel между 3 выпадающими опциями выбора. (Угловой)

0 голосов
/ 17 апреля 2019

Что-то, над чем я работаю, имеет 3 выбора, и я пытаюсь их синхронизировать / связывать вместе.Я сделал некоторый фиктивный код, который суммирует мою проблему (так как у меня более крупный проект и я выполняю кучу вызовов API, чтобы получить данные в этой форме).Вот оно:

populate-dropdown.component.html 

<div id=myForm>
  <label> Brands:
    <select id ="Select1" class="input-small" [(ngModel)]="currentBrand">
      <option *ngFor="let brand of getListOfBrands()">
        {{ brand }}
      </option>
    </select>
  </label>
</div>
<br/>

<div id=myForm>
  <label> Models:
    <select id ="Select1" class="input-small" [(ngModel)]="currentModel">
      <option *ngFor="let model of getListOfModels(currentBrand)">
        {{ model }}
      </option>
    </select>
  </label>
</div>
<br/>

<div id=myForm>
  <label> Model Numbers:
    <select id ="Select1" class="input-small" [(ngModel)]="currentNumber">
      <option *ngFor="let number of getListOfNumbers(currentModel)">
        {{ number }}
      </option>
    </select>
  </label>
</div>

populate-dropdown.component.ts 

import { Component, OnInit, Output } from '@angular/core';
import { DropdownData } from '../dropdown-data';

@Component({
  selector: 'app-populate-dropdown',
  templateUrl: './populate-dropdown.component.html',
  styleUrls: ['./populate-dropdown.component.css']
})
export class PopulateDropdownComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.initializeStuff();
  }

  currentBrand: string;
  currentModel: string;
  currentNumber: number;

  listOfDropdownData = [];

  private initializeStuff() {
    let firstGroup = new DropdownData();
    let secondGroup = new DropdownData();

    firstGroup.nameOfBrand = "The Best";
    secondGroup.nameOfBrand = "The Worst";

    firstGroup.listOfModels = ["Best1", "Best2", "Best3", "Best4", "Best5"];
    secondGroup.listOfModels = ["Worst1", "Worst2"];

    let one = {model: "Best1", modelNumbers: [1901, 1905, 1909]};
    let two = {model: "Best2", modelNumbers: [200, 2000, 20000, 20000]};
    let three = {model: "Best3", modelNumbers: [300]};
    let four = {model: "Best4", modelNumbers: [400, 4500]};
    let five = {model: "Best5", modelNumbers: [510, 520, 530]};

    firstGroup.listOfModelsWithNumbers.push(one);
    firstGroup.listOfModelsWithNumbers.push(two);
    firstGroup.listOfModelsWithNumbers.push(three);
    firstGroup.listOfModelsWithNumbers.push(four);
    firstGroup.listOfModelsWithNumbers.push(five);

    let first = {model: "Worst1", modelNumbers: [97, 24, 108]};
    let second = {model: "Worst2", modelNumbers: [19]};
    secondGroup.listOfModelsWithNumbers.push(first);
    secondGroup.listOfModelsWithNumbers.push(second);

    this.listOfDropdownData.push(firstGroup);
    this.listOfDropdownData.push(secondGroup);
  }

  private getListOfBrands() {
    let i : number;
    let myList = [];
    for(i = 0; i < this.listOfDropdownData.length; i++) {
      myList.push(this.listOfDropdownData[i].nameOfBrand);
    }
    return myList;
  }

  private getListOfModels(brand: string) {
    let i : number;
    for(i = 0; i < this.listOfDropdownData.length; i++) {
      if(this.listOfDropdownData[i].nameOfBrand == brand) {
        return this.listOfDropdownData[i].listOfModels;
      }
    }
  }

  private getListOfNumbers(model: string) {
    let i: number;
    let j: number;
    for(i = 0; i < this.listOfDropdownData.length; i++) {
      for(j = 0; j < this.listOfDropdownData[i].listOfModelsWithNumbers.length; j++) {
        if(this.listOfDropdownData[i].listOfModelsWithNumbers[j].model == model) {
          return this.listOfDropdownData[i].listOfModelsWithNumbers[j].modelNumbers;
        }
      }
    }
  }
}

dropdown-data.ts 

export class DropdownData {
    nameOfBrand: string;
    listOfModels: string[];
    listOfModelsWithNumbers: any[] = [];
}

И я просто вызываю свой компонент populateDropdown в своем компоненте app следующим образом: 

<app-populate-dropdown></app-populate-dropdown>

Итак, чтобы понять, чего я пытаюсь достичь: я хочу, чтобы страница изначально была по умолчанию с первымбренд, первая модель, которая появляется для него, и первый номер, связанный с этой моделью.Если пользователь меняет модель, также должны меняться номера модели, а если пользователь меняет марку, я хочу еще раз показать первую модель и список номеров моделей.

Проще говоря: каждая маркаимеет свой собственный список моделей, который имеет свой собственный список modelNumbers

Моя первая проблема заключается в том, что после использования ngModel мне кажется, что я не могу установить значения по умолчанию (я хочу, чтобы он отображал мой первый вариантдля всех них), и поэтому мне было интересно, как я мог бы подойти к этому.

Моя следующая проблема заключается в том, что, хотя бренд и модели синхронизированы, номера модели не будут отображаться, пока я не изменю модель (я хочу ихпо умолчанию), и когда я переключаю бренды, номера модели из модели предыдущего бренда все еще там.

Что я могу сделать, чтобы исправить это, не слишком много работая со структурой того, что у меня есть?Также для дальнейшего использования, что было бы лучшим способом для такого рода связи между данными?Спасибо

1 Ответ

1 голос
/ 17 апреля 2019

Есть несколько советов:

Использование (изменение) в select

Использование события change и обновление списков при изменении.как это: 

<select id ="Select1" class="input-small" [(ngModel)]="currentBrand" (change)="onBrandChange()">
  <option *ngFor="let brand of brandsList">
    {{ brand }}
  </option>
</select>

Не нажимайте на listOfDropdownData, а переинициализируйте его

Измените этот код: 

this.listOfDropdownData.push(firstGroup);
this.listOfDropdownData.push(secondGroup);

на этот: 

this.listOfDropdownData = [...this.listOfDropdownData, firstGroup , secondGroup];
...