首页 > 解决方案 > 选项未在 mat-select 中显示

问题描述

我通过调用我的数据库填充了一组数据(选项)。我 console.log 数组(dataArray),它显示数组已被预期的数据填充。但是,当我运行应用程序时,选择框不显示数组中的任何选项,只显示我在开始时设置的默认选项('hello')。任何帮助表示赞赏。

选择.component.ts:

import { Component, OnInit} from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

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

export class SelectComponent implements OnInit {

    constructor(private http: HttpClient) {
    }

    dataArray: String[] = ['hello'];
    ngOnInit() {
        const httpParams = new HttpParams().set('cars', 'toyota');
        console.log(this.dataArray);


        let text;
        this.http.get(`http://localhost/scheduler/parse.php`, { params: httpParams, responseType: 'text' }).subscribe(function (response) {
            text = response;
            console.log(text);
            this.dataArray = JSON.parse(text.replace(/'/g, '"'));
            console.log(this.dataArray);
        });
    }

}

选择.component.html:

<mat-card style="margin-top: 25px">
  <mat-form-field>
    <mat-select placeholder="Cars">
      <mat-option *ngFor="let data of dataArray" [value]="data">
        {{data}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</mat-card>

标签: angulartypescript

解决方案


推荐阅读