Question

我一直在尝试让我的下拉列表显示所选的值，但是当列表首次加载时，第一个值显示的是全部3，我希望它默认为作业1.我怎么能这样做？

角度代码：

import { Component } from '@angular/core';

@Component({
    selector:'job-container',
    templateUrl: './job.container.html'
})

export class JobContainer {

    public jobTypes:Array<string> = ["Job 1", "Job 2", "Job 3"];

    selectedType = this.jobTypes;

    onSelect(job = this.jobTypes): void {
        this.selectedType = job;
    }
};

Html代码：

<div class="container">
    <h4 translate="Job Type"></h4>
</div>
<div class ="col-10">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" 
            id="drowdownMenuButton" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            {{selectedType}}
            </button>
        <div class="dropdown-menu" aria-labelledby="drowdownMenuButton">
            <a class="dropdown-item" *ngFor="let job of jobTypes"
            (click)="onSelect(look)">{{job}}</a>
        </div>
    </div>
</div>

这显示了产生的内容： drop down, default value

当我点击其中一个选项时，它会显示为所选项。但是我希望图片1中显示的默认值消失并替换为Job 1。这显示了所选的一个选项： drop down option selected

Answer 1

问题解决了：

    export class JobContainer {

        public jobTypes:Array<string> = ["Job 1", "Job 2", "Job 3"];

        selectedType: any = this.jobTypes[0];

        onSelect(job = this.jobTypes): void{
            this.selectedType = job;
        }
   }

下拉列表显示默认数组值Angular2

1 个答案: