Как сделать так, чтобы в списке mat-select автоматически выбиралась опция

#javascript #html #angular #angular-material

#javascript #HTML #angular #angular-материал

Вопрос:

Список привязан к коду .ts: вот 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 amp;amp; apptype.touched amp;amp; apptype.errors amp;amp; inputForm.submitted">
                            <span *ngIf="apptype.errors['required']">Ова поле е задолжително.</span>
                        </mat-error>
                    </mat-form-field>
  

Как мне сделать так, чтобы один из параметров выбирался автоматически при открытии страницы?

Ответ №1:

Я бы внес прямое редактирование в ваш код, но вы не предоставили многого, поэтому приведу очень простой пример:

Это ваш ts файл

 @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);
    }
}
  

Это ваш html файл:

 <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>
  

Как вы можете видеть, вы просто берете people object ( FormGroup instance ) и устанавливаете его значение на то, что хотите. Я не мог сделать это более тривиальным, чем это.

Комментарии:

1. Вы не представляете, насколько глубоко осознание того, что вместо того, чтобы пытаться принудительно выделить опцию путем вызова любых функций выбора, имеющихся в компоненте, он сделает все это за вас автоматически, если вы просто используете привязку, которую вы уже настроили именно для этой цели.