angular - 选项未在 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>
解决方案
推荐阅读
- node.js - 如何在车把的 if else 条件中使用 equals == 运算符
- powershell - 特殊大小写或覆盖 Remove-Item 以便 rm -rf 匹配 linux 行为
- mysql - Doctrine 的 Sql Syntax 错误,可能是因为 Mysql 版本的变化
- javascript - 如何登录到 JavaScript 表单并使用 python 抓取
- azure - Azure 函数无法从 Visual Studio 2019 启动 .listener 无法启动
- spring-boot - Spring Boot Rest Controller 显示获取请求的数据
- python-3.6 - 运行 python3 -m venv project 返回退出状态 1
- html - 具有 CSS 溢出-y 属性的非功能滚动条
- javascript - 单击旭日形图中的子元素,向下钻取到父元素
- python - 写入文件的更好方法?