如何使 mat-select 列表自动选择一个选项

Question

The list is binded to the .ts code: Here is the html :

                        <mat-label>Тип на апликација:</mat-label>
                        <mat-select [(value)]="AppId" required #apptype="ngModel" [(ngModel)]="AppId" name="apptype" 
                            >
                            <mat-option>---</mat-option>
                            <mat-option  *ngFor="let applicationType of applicationTypes"  value="applicationType.ID" >
                                {{applicationType.Name}}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="apptype && apptype.touched && apptype.errors && inputForm.submitted">
                            <span *ngIf="apptype.errors['required']">Ова поле е задолжително.</span>
                        </mat-error>
                    </mat-form-field>

How do i make one of the options automatically selected when i open the page?

Answer 1

I'd make a direct edit to your code, but you didnt provide much, so here goes a very simple example:

This is your ts file

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  people: FormGroup;

  peopleArray=[{
    name:'name 1',
  },{
    name:'name 2',
  },{
    name:'name 3',
  }]

  constructor(private fb: FormBuilder){}

  ngOnInit() {

        this.people = this.fb.group({
            people: [null, Validators.required]
        });

    const toSelect = this.peopleArray.find(p => p.name == "name 3");
    this.people.get('people').setValue(toSelect);
    }
}

This is your html file:

<form [formGroup]="people">
<mat-form-field class="full-width">
    <mat-select placeholder="person" formControlName="people">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let person of patientCategories" [value]="person">
            {{person.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{people.get('people').value | json}}</p>
</form>

As you can see, you just take the people object ( FormGroup instance ) and set its value to whatever you want. I couldn't make it more trivial then this.