加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular5 – 如何设置PrimeNG p-dropdown的默认值

发布时间:2020-12-17 07:16:41 所属栏目:安全 来源:网络整理
导读:我在angular5应用程序中使用PrimeNG.我有p-dropdown的问题 题 我有显示国家的p-down.我正确绑定选择选项,它工作正常(此数据来自api),但我需要为此p-dropdown设置默认选择选项为“India”. 我将ng-model值设置为印度,但它不起作用. 我的dummy.component.html
我在angular5应用程序中使用PrimeNG.我有p-dropdown的问题

我有显示国家的p-down.我正确绑定选择选项,它工作正常(此数据来自api),但我需要为此p-dropdown设置默认选择选项为“India”.

我将ng-model值设置为印度,但它不起作用.

我的dummy.component.html代码

<div class="form-group col-md-2">
    <div>
        <label for="inputEmail4"> Select Country</label>
        <span style="color:red">*</span>
    </div>
    <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder="select country"
        (onChange)="getStatebyCountry(applicant.country,$event)" #country="ngModel" required>
    </p-dropdown>
    <span *ngIf="country.invalid && (country.dirty || country.touched)">
        <span [hidden]="!country.hasError('required')" style="color:#ffa500">country is mandatory</span>
    </span>
</div>

我的dummy.component.ts

export class dummyComponent implements OnInit {
    //variable declaration scope for all controller function
    applicant: any = {};
    country: string; constructor() {
    }
    ngOnInit() {
        this.applicant.country = 'India';
    } 
    this.countries = [];
// this.countries.push({ label: 'Select Country',value: '' });
//getallcountries
this.UserService.getallcountries().subscribe(result => {
    console.log("countries" + result);
    this.cnt = result;
    for (let i = 0; i <= this.cnt.length; i++) {
        if (this.cnt[i].id === 1) {
            this.countries.push({ label: this.cnt[i].name,value: this.cnt[i].id });
        }
    }
 });

解决方法

尝试更换

this.applicant.country = 'India';

this.applicant = {country: 'India'};

编辑

从API获取数据后显示您的p-dropdown.

<div *ngIf="dataLoaded">
  <p-dropdown [options]="countries" [(ngModel)]="applicant.country"></p-dropdown>
</div>

见Plunker

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读