[Angular] Lista rozwijana

0

Witam.
Uczę się Angulara i TypeScripta i borykam się z rozwiązaniem problemu który sobie postawilem. Mianowicie: załóżmy że mam w komponencie następujące pola:

produkty = ['produkt1', 'produkt2', 'produkt3', 'produkt4']; // jest to tablica zawierająca stringi które są nazwami kolejnych pól.

produkt1 = ['Podprodukt1', 'Podprodukt2', 'Podprodukt3', 'Podprodukt4'];
produkt2 = ['Podprodukt1', 'Podprodukt2', 'Podprodukt3', 'Podprodukt4'];
produkt3 = ['Podprodukt1', 'Podprodukt2', 'Podprodukt3', 'Podprodukt4']; // są to tablice stringów
produkt4 = ['Podprodukt1', 'Podprodukt2', 'Podprodukt3', 'Podprodukt4'];

natomiast w widoku chce zrobić dwie listy rozwijane gdzie w pierwszej będe wyświetlal produkty do wyboru:

<select> <option *ngfor="let x of produkty">{{x}}</option> </select>

gdzie po wybraniu z tej listy naprzykład produktu - produkt3 - aktywuje się następna lista rozwijana z opcjami przynależnymi tylko do produktu3

<select> <option *ngfor="let y of ???">{{y}}</option> </select>

I nie mam koncepcji jak połączyć te dwie listy rozwijane żeby zmapować wybór z pierwszej listy stringów aby wskazywał on na pole o tej nazwie w komponencie?
Z góry dzięki za jakieś podpowiedzi :) pozdrawiam Was.

0

Zrobić sobie tablicę w której przechowujesz pary klucz wartość gdzie klucze to Twoje pierwsze opcje produkty, a wartość to tablice z 'podproduktami'.
let produkty_i_podprodukty = [{'produkt1', ['podprod1', 'podprod2'}, {'produkt2', ['podprod21', 'podprod22'], ... ]; i populować drugi select w zależności od wybranej pierwszej wartości. Później coś wyklikam.

0

na upartego, możesz to upakować w jeden Object/Array, potem dojdziesz co do czego :P

1

Na szybko coś takiego powinno zadziałać:

selectedParentProduct;
  products = [
    { name: "product1", subproducts: ["sub11", "sub12", "sub13"] },
    { name: "product2", subproducts: ["sub21", "sub22", "sub23"] }
 ];
<select [(ngModel)]="selectedParentProduct">
  <option *ngFor="let product of products" [ngValue]="product">{{ product.name }}</option>
</select>
<select *ngIf="selectedParentProduct">
  <option *ngFor="let subproduct of selectedParentProduct.subproducts" [value]="subproduct">{{ subproduct }}</option>
</select>
0

Dzieki za podpowiedzi :) postaram się sprawdzić jak tylko znajde chwile.
Pozdrawiam

—— Edit
@lookacode1 bardzo przejrzyście wszystko działa :) dziękuje wszystkim

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0