Выпадающий список будет заполняться из данных json в простом ng - PullRequest
Новая
       25

Выпадающий список будет заполняться из данных json в простом ng

0 голосов
/ 20 февраля 2019

Копия Json, которую я получаю после передачи в модель загрузки данных

Я новичок в Angular и пытаюсь разработать простую страницу.У меня есть два варианта выбора, используя primeng, где я ввожу номер загрузки и номер материала.Я пытаюсь автоматически заполнить номер материала на основе выбранного номера загрузки.Я бы хотел, чтобы опция выбора материала отображала все материалы в предыдущей выбранной загрузке в раскрывающемся списке.Как я могу добиться этого.

Мой HTML-код:

Приведенный ниже код объясняет, что у меня есть два варианта выбора - dropdownload и dropdownmaterial.

    <div class="row">
 <div class="col">
  <form #searchform="ngForm">   
   <div class="form-group">    
    <table>
     <tbody>
      <tr>
       <th>
        <label>Loadnummer:</label>
       </th>
       <td>
       <!-- Selecting Load No from the drop down menu -->
        <div >                 
         <p-dropdown id="dropdownload" name="dropdownload" [options]= "loadnos [(ngModel)]= "selectedloadno" editable="true" placeholder="Vælge loadNo" (onChange)="onloadselected(selectedloadno)">
         </p-dropdown>
        </div> 
        </td>
        </tr>        
       <tr>
         <th>
          <label>Materialnummer:</label> 
         </th>
         <td> 
         <!-- Selecting Material No from the drop down menu -->

         <p-dropdown ng-if="selectedloadno=LoaddataModel.loadNumber"
id="dropdownmaterial"name="LoaddataModel"[filter] = "false"#LoaddataModel = "ngModel"[options]= "LoaddataModel.materialNumber"[(ngModel)]="selectedmaterialno" editable="true"[optionLabel]="materialNumber" placeholder="Vælge materialNumber (onChange)="onmaterialselected(selectedmaterialno)">
        </p-dropdown>
       </td>
       <td>      
        <input type="submit" value="Søg" id="submit (click)='showsearchdetails($event)'>    
      </td>
     </tr>
    </tbody>
   </table>
  </div> 
 </form>  
</div>

Ниже приведен скрипт типа, где я получаю данные из json и помещаю их в массив LoaddataModel.

Данные для dropdownload select выбираются из массива Loadnos, который жестко закодирован, и я передаю только значение параметра для возврата через http, которое возвращает мне json.Это анализируется службой xx, и у меня есть модель загрузки данных, в которой хранятся все значения.Я создаю массив для этой модели данных нагрузки и передаю значения параметров на основе выбора из выпадающего списка.Эта часть работает нормально.Единственное, с чем у меня возникают проблемы: отображение всех значений материала в массиве в качестве раскрывающегося списка для dropdownmaterial.

Теперь у меня есть все данные, которые я хочу, но вопрос в том, как использоватьэто в выпадающем материале.Я использую primeng и ngmodule и ngformmodule.Если бы кто-то мог предложить мне решение с использованием вышеуказанных библиотек, это было бы здорово.

Любая помощь будет высоко ценится.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadData } from 'src/app/shared/models/load-data.model';
import { xxService } from 'src/app/core/services/mii-data.service';
import {SelectItem} from 'primeng/api';  

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

  selectedload: any=''
  selectedmaterial: any=''
  displaymaterialMessage: String;
  public Materialnummer: Number;
  response: any;
  //loadnos: LoadNo [];
  //selectedloadno: LoadNo;
  loadnos: SelectItem[];
  selectedloadno: String;   
  LoaddataModel: Array<LoadData> = [];

 ngOnInit() {   

 for (let i = 0; i < 11; i++) {
 this.cardelements.push(this.cards);

            }
         }

constructor(private http: HttpClient, private dataService: xxService) {

    this.loadnos = [
      {label: 'LoadNo.1', value: 1},
      {label: 'LoadNo.2', value: 2},
      {label: 'LoadNo.3', value: 3},
      {label: 'LoadNo.4', value: 4},
      {label: 'LoadNo.5', value: 5},
      {label: 'LoadNo.6', value: 6},
      {label: 'LoadNo.7', value: 7},
      {label: 'LoadNo.8', value: 8},
      {label: 'LoadNo.9', value: 9},
      {label: 'LoadNo.10', value: 10},
      {label: 'LoadNo.11', value: 11}
  ];  

  } 

onloadselected (enteredload: string)
  {
   this.selectedload = enteredload;
   console.log(this.selectedload); //option value will be sent as event

   this.dataService.getAgvData(this.selectedload).subscribe(data => {
   this.LoaddataModel = data;
  });

  }

  onmaterialselected(enteredmaterial: number)
  {
   console.log(enteredmaterial); 
   this.selectedmaterial = enteredmaterial;


  }



}
...