在其他组件中设置下拉值答案

【问题标题】：set dropdown value in other component在其他组件中设置下拉值
【发布时间】：2019-12-10 11:45:18
【问题描述】：

我创建了这个下拉组件：

<mat-form-field appearance="outline">
    <mat-label>{{formTitle| translate}} *</mat-label>
<mat-select [(value)]="itemId">
    <div class="col-lg-12 mt-4 kt-margin-bottom-20-mobile">
        <mat-form-field class="mat-form-field-fluid" appearance="outline">
            <mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label>
            <input (keyup)="getValues($event.target.value)" matInput [placeholder]="'GENERAL.TITLE' | translate">
        </mat-form-field>
    </div>
    <mat-progress-bar *ngIf="loading" class="mb-2" mode="indeterminate"></mat-progress-bar>
    <mat-option  (click)="emitdata(item.key)" *ngFor="let item of values" [value]="item.key">
        {{item.value}}
    </mat-option>
</mat-select>

ts：

export class SearchableDropdownComponent implements OnInit {

    @Input() url: string;
    @Input() formTitle: string;
    @Output() selectedId = new EventEmitter<number>();
    @Input() itemId: number;

    loading = false;
    values: KeyValue[];
    title: string;

    constructor(
        private searchService: SearchableDropDownService,
        private cdRef: ChangeDetectorRef) {
    }

    ngOnInit(): void {
        this.getValues(null);
    }

    emitdata(event): void {
        console.log(event);
        this.selectedId.emit(event);
    }

    getValues(event): void {
        this.cdRef.detectChanges();
        this.loading = true;

        let model = {} as SendDateModel;
        model.page = 1;
        model.pageSize = 60;
        model.title = event;

        this.searchService.getAll(this.url, model).subscribe(data => {
            this.values = data['result']['records'];
            this.cdRef.detectChanges();
            this.loading = false;
        });

    }
}

我在组件中使用它：

<div class="col-lg-6 kt-margin-bottom-20-mobile">
   <kt-searchable-dropdown [itemId]="304" [formTitle]="'COURSE.COURSE_GROUP'" [url]="url"></kt-searchable-dropdown>
 </div>

我传递给下拉 304 项，以便在下拉菜单中预先选择它。但它没有在下拉菜单中预先选择项目 304。

如何设置下拉菜单中选择的 304 项？

【问题讨论】：

是否将 itemId 的值设置为 304？ ngOnChanges() 钩子中的 console.log 将给出 itemId 的值。其他一切似乎都是正确的。

标签： javascript angular typescript

【解决方案1】：

当您使用 Input() 获取 ItemId 时，您始终可以使用 ngModel 来实现两种方式的数据绑定。

例如在你的情况下：

    <mat-select [(ngModel)]="ItemId">
    <mat-option *ngFor="let item of values"  [value]="item.key">{{item.value}}</mat-option>
  </mat-select>

因此，基本上它将以两种方式与变量包含数据绑定，并在您加载组件时保持选中状态。

您可以阅读有关两种方式数据绑定here 的更多信息。

更新

ngModel 应该可以工作。你没有错误地实施，但它也不是正确的方式。您选择的值仅来自 [(ngModel)]。

所以你的

[(value)]="itemId"

应该是

[(ngModel)]="itemId"

完整代码如下：

<mat-select [(ngModel)]="ItemId">
    <mat-option *ngFor="let item of values"  [value]="item.key">{{item.value}}</mat-option>
  </mat-select>

如果没有必要，尽量不要在 mat-select 之后声明任何 div 或组件，或者如果它对您的组件有错误，请一一调试。

【讨论】：