在 Angular 中启动页面时最初无法显示 HTML select 选项

Question

在我的 ts 文件中，我定义了这个：

  statuses = [
    { id: 1, name: "Approved" },
    { id: 2, name: "Created" },
    { id: 3, name: "Rejected" },
    { id: 4, name: "Cancelled" },
  ];

在我的HTML这里是代码

<div class="col-1" id="statusFilter">
      <label class="font-weight-bold text-secondary" for="statusFilter">Filter By Status:</label>
      <select
        [(ngModel)]="statusFilter"
        class="form-control"
        (change)="setStatusFilter()">
        <option value="'Choose'" disabled selected><strong> Choose Filter: </strong></option>
        <option *ngFor="let status of statuses" [value]="status.name">
            {{ status.name }}
        </option>
    </select>
</div>

出现在 Angular 应用程序中的内容是空的 select，我的目标是让第一个标签在 select 任何东西

之前显示它的值 'Choose Filter: '

这是它目前的样子： enter image description here

这就是我需要它出现的内容 desired result

并且有关信息，这是 select 列表在我单击它时的显示方式，只有在单击时我才能在其中看到禁用的选项，但默认情况下不会 select list clicked

知道我在这里做错了什么吗？

Answer 1

您应该使用“ts”文件中的“选择”值填充statusFilter。

statusFilter = 'Choose';

在 Angular 中启动页面时最初无法显示 HTML select 选项

Unable to show HTML select option initially when starting the page in Angular

html

javascript

typescript

bootstrap-4

angular