Angular-6 显示和隐藏下拉菜单 select 选项未显示正确的数据

Question

我有 2 种类型的 drop-down 基于 select 值列 drop-down 将显示。

(一个用于显示数据库数据, 另一个用于显示桌面数据。)

https://stackblitz.com/edit/angular-ivy-3n238j?file=src%2Fapp%2Fapp.component.html

app.componet.html

<!-- show database data -->
<select *ngIf="isdbShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
    <option *ngFor="let data of dynamicArray[i].dropdownData;">{{data}}</option>
</select>

<!-- show desktop data -->
<select *ngIf="isdesktopShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
    <option *ngFor="let data of dynamicArray[i].dropdownData;">{{data.name}}</option>
</select>

我的问题如下

如果我 select desktop 第一行，它将在值列 drop-down.
在第 2 行，如果我 select database，desktop 将显示为 [object object] 检查下面的图像

app.component.ts

import { Component, VERSION, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dynamicArray: Array<any> = [];
  newDynamic: any = {};
  dbValue = ["mysql", "oracle", "mongo"];
  desktopValue = [{'id':'1', 'name':'dell'}, {'id':'2', 'name':'lenovo'}, {'id':'3', 'name':'hp'}];
  isdbShow:boolean = false;
  isdesktopShow:boolean = false;
  ngOnInit(): void {
    this.newDynamic = { title1: "", title2: "", dropdownData: [] };
    this.dynamicArray.push(this.newDynamic);
  }
  addRow(index) {
    this.newDynamic = { title1: "", title2: "", dropdownData: [] };
    this.dynamicArray.push(this.newDynamic);
    console.log(this.dynamicArray);
    return true;
  }

  deleteRow(index) {
    if (this.dynamicArray.length == 1) {
      return false;
    } else {
      this.dynamicArray.splice(index, 1);
      return true;
    }
  }

  changed(value, index) {
    let dropdownData;
    if (value == 1) {
      this.isdbShow = true;
      this.isdesktopShow = false;
      this.dynamicArray[index].dropdownData = this.dbValue;
    }

    if (value == 2) {
      this.isdbShow = false;
      this.isdesktopShow = true;
      this.dynamicArray[index].dropdownData = this.desktopValue;
    }
  }
}

Please check the flow in my demo link with same scenario. 1st row select desktop and 2nd row database

Answer 1

试试这个

<select *ngIf="isdbShow" [(ngModel)]="dynamicArray[i].title2" class="form-control">
                <option *ngFor="let data of dynamicArray[i].dropdownData;">{{data?.name ? data?.name : data}}</option>
              </select>

Angular-6 显示和隐藏下拉菜单 select 选项未显示正确的数据

Angular-6 show and hide drop-down select option not showing proper data

javascript

dropdown

angular

angular6