时间戳

首页 > 解决方案 > Angular 7 可以将 compareWith 与模态一起使用吗？

angular - Angular 7 可以将 compareWith 与模态一起使用吗？

问题描述

对不起，如果这是重复的！所以我试图将我的mat-select默认设置为列表中的第一个选项。听起来很容易，对吧？错误的。我正在使用弹出的模式来输入任务并尝试设置默认状态（只有在选择项目后才能选择）。该compareWith函数工作得很好，但是一旦退出模态并重新进入（不刷新页面），compareWith函数中的第二个参数为空，并且状态不会默认为任何值。退出表单时，我将其重置。我正在使用FormControl，不是ngModel，只是一个仅供参考。

我尝试了几种不同的compareWith功能，但只找到了一个有效的功能。我曾尝试使用[selected]="whatever"select 标签上的 ，但通过研究很快发现它不适用于材料输入。我还尝试在重置表单时将 formcontrol 值设置为等于状态。这有效，但是当我再次打开模式时它已经显示。由于在选择项目之前状态处于禁用状态，因此我不想在加载时显示任何状态。

在 html 中选择项目：

<mat-form-field class="form-group">
      <mat-select id="project" name="project" placeholder="Project" formControlName="project" [required]="true"
        [ngClass]="{'is-invalid': formAddTask.project.errors}">
        <mat-option *ngFor="let project of availableProjects" [value]="project.id">{{project.name}}</mat-option>
      </mat-select>
      <mat-error *ngIf="addTaskForm.get('project').hasError('required')">Project is required</mat-error>
    </mat-form-field>

html中的状态选择：

 <mat-form-field class="form-group">
      <div class="input-group"></div>
      <mat-select id="status" name="status" placeholder="Status" formControlName="status" [compareWith]="compareObjects">
        <mat-option *ngFor="let status of availableStatuses; let i = index" [class.selected]="status === selectedStatus" 
         [value]="status.id">{{status.name}}</mat-option>
      </mat-select>
    </mat-form-field>

ts 中的 CompareWith 函数：

compareObjects(o1: any, o2: any): boolean {
return o1.name === o2.name && o1._id === o2._id;
}

让我知道是否还有其他需要展示的内容！

在选择项目之前，状态中不应包含任何内容，一旦发生这种情况，我希望状态默认为列表中的第一个选项。实际发生的情况是，一旦模态退出并返回，选择项目后将不再显示默认状态，或者它将显示在模态的初始加载时，我希望它只显示默认一次项目被选中。

对不起，如果我重复自己太多，我宁愿提供太多信息而不是不够。在此先感谢，任何帮助表示赞赏！:)

标签： angularselectmodal-dialogdefault

解决方案

所以我最终找到了解决方法。我在项目下拉列表中添加了一个 onChange 事件，并在那里设置状态下拉列表的值。

这是我最终使用的代码：

onProjectChange() { this.addTaskForm.get('status').setValue(this.availableStatuses[0].id); }

推荐阅读