#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. Вы не представляете, насколько глубоко осознание того, что вместо того, чтобы пытаться принудительно выделить опцию путем вызова любых функций выбора, имеющихся в компоненте, он сделает все это за вас автоматически, если вы просто используете привязку, которую вы уже настроили именно для этой цели.