Question

我正在使用Angular 8和FormGroup，但有一个我无法解决的小问题，在我的网页中，我试图基于另一个<select>在<select>内呈现值。

这是我收到的JSON：JSON response

我正在尝试基于"currencies"渲染"ListPricelist"

这是我的HTML：

  <div  class="flex1 pl10">
   <select formControlName="pricelist" class="form-control" [ngClass]="{'is-invalid': submitted && 
      f.pricelist.errors}">
    <option value selected="selected">Select a pricelist</option>
    <option   name="pricelist_id" ngClass="pricelist_id"  *ngFor="let p of filter.ListPricelist; let i = index" id="pricelist_id" >{{i}}{{p.label}}</option>
  </select>

  <div *ngIf="submitted && f.pricelist.errors" class="invalid-feedback">
    <div *ngIf="f.pricelist.errors.required">Pricelist is required</div>
  </div>

  <select  formControlName="currency" class="form-control">
    <option value selected="selected">Select a currency</option>
    <option [value]="currency_id" *ngFor="let c of registerForm.value.pricelist.currencies" id="currency_id">{{c.code}}</option>
  </select>
</div>

但是在我的页面中，它不会呈现，我只能选择List Pricelist

请随时告诉我您是否需要TypeScript文件，并感谢您的提前帮助

编辑：这是我的TS文件

import {Component, Injectable, OnInit} from '@angular/core';
import {Form, FormBuilder, ReactiveFormsModule, FormGroup, Validators} from 
"@angular/forms";
import {HttpClient} from '@angular/common/http';
import {ActivatedRoute, Router} from '@angular/router';




 @Component({
   selector: 'app-project',
   templateUrl: './project.component.html',
   styleUrls: ['./project.component.scss'],
 })

 @Injectable({
   providedIn: 'root'
  })


 export class ProjectComponent implements OnInit {


   ngOnInit() {
    this.requiredFields()
    }

filter = JSON.parse(window.localStorage.getItem('filters'));
filterCurrency = this.filter;
currencies: Array<any>;
 params: {
  ListPricelist: Array<{
    currencies: Array<{
      id: number;
      code: string;
      }>
    }>;
  };

 get f() {
  return this.registerForm.controls;}

 requiredFields(){
   this.registerForm = this.formBuilder.group(
  {
    name: ['',[Validators.required]],
    country: ['',[Validators.required]],
    pricelist_id: [''],
    pricelist: ['',[Validators.required]],
    currency: ['',[Validators.required]],
    status: ['',[Validators.required]],
    tarif: ['',[Validators.required]],
    hauteur: ['',[Validators.required]],
    supp: ['',[Validators.required]],
    mainO: ['',[Validators.required]]
    }
  )
 }
  constructor(private httpClient: HttpClient,
           private activatedRoute: ActivatedRoute,
           private formBuilder: FormBuilder,
           private router: Router,
           ){}

  }

export interface getResponse {
  ListPricelist: Array<{
   currencies: Array<{
   id: number;
   code: string;
   }>
  }>;

 }

Answer 1

我稍微简化了您的例子：

<div>
  <select (change)="selectedPriceListIndex = $event.target.value">
    <option value="-1" selected="selected">
      Select a pricelist
    </option>
    <option *ngFor="let p of filter.listPriceList; let i = index" [value]="i">
      {{ p.label }}
    </option>
  </select>

  <select>
    <option value selected="selected">
      Select a currency
    </option>
    <option *ngFor="let c of filter.listPriceList[selectedPriceListIndex]?.currencies">
      {{ c.code }}
    </option>
  </select>
</div>

请参阅stackblitz：https://stackblitz.com/edit/angular-kj3l5a

根据下拉值从另一个数组渲染数组值

1 个答案: