Question

很抱歉，如果这是重复的！因此，我尝试将mat-select的默认值设置为列表中的第一个选项。听起来很容易，对吧？错误。我正在使用弹出的模态来输入任务，并试图设置默认状态（一旦选择项目，您只能选择默认状态）。 compareWith函数可以正常工作，但是一旦退出模态并重新输入（不刷新页面），compareWith函数中的第二个参数为null并且状态不是默认值到任何东西。退出表单时，我将其重置。我使用的是FormControl，而不是ngModel，仅供参考。

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

在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;
}

让我知道我还有什么需要展示的！

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

对不起，如果我重复太多自己，我宁愿提供太多信息而不是提供不足。在此先感谢您的帮助！：）

Answer 1

首先要解决的是，[compareWith]绝对可以在modals中使用

要解决此问题，请使用[(value)]而不是[value]并将其绑定到status而不是status.id。这意味着compareWith将获得select值和option值作为status对象，并且比较函数将获得id和来自这些对象的name并进行比较。

 <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">{{status.name}}</mat-option>
      </mat-select>
    </mat-form-field>

Answer 2

所以我最终找到了解决方法。我在项目下拉菜单中添加了onChange事件，并在其中设置状态下拉菜单的值。

这是我最终使用的代码：

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

Angular 7可以与compareMod一起使用吗？

2 个答案: