angular - 仅当仅存在一个值时才设置 mat-select 默认值

Question

我的 Angular 项目中有一个 mat-select，它从服务器获取值并显示它们。我需要做的是确保在收到的值恰好是 1 的情况下，将其显示为默认值，但仅在这种情况下，因为这些值不是预先确定的。有没有办法做到这一点？

HTML：

    <div class="combo">
    <div>
        <mat-form-field appearance="outline" class="calendarfilter">
            <mat-label>Utente</mat-label>
            <mat-select (selectionChange)="filteredUsers.emit($event.value)" [value]="null">
              <mat-option *ngFor="let user of users" [value]="user.id">
                {{user.descrizione}}
              </mat-option>
            </mat-select>
          </mat-form-field>
    </div>
    </div> 

TS：

        import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
    import { UtentiAgenda } from 'src/app/models/EventoServer';
    
    @Component({
      selector: 'app-user-filter',
      templateUrl: './user-filter.component.html',
      styleUrls: ['./user-filter.component.css']
    })
    export class UserFilterComponent implements OnInit {
      @Input() users: UtentiAgenda[]
      @Output() filteredUsers: EventEmitter<number>= new EventEmitter()
      constructor() { }
    
      ngOnInit(): void { 
      }
    
    }

主页组件中的 HTML：

    <app-user-filter class="filterbar" *ngIf="release=='wincar' && userAgenda != null" [users]="userAgenda" (filteredUsers)="userChanged($event)">
        </app-user-filter>

Answer 1

只需添加 <mat-select (selectionChange)="filteredUsers.emit($event.value)" [(value)]="selectedValue">

并在您的 ts 中设置 selectedValue 在 if 条件中，例如

if(this.users.length === 1){
    this.selectedValue = this.users.descrizione; //or according to your users structure
  }