Auto Fill Angular Material Выберите параметры из URL-адреса

MatSelect не знает, что означает srv_url (и я тоже). Это директива, которую вы написали? Или вы просто пытаетесь определить URL-адрес как свойство, которое использует mat-select? В любом случае вы не показали, что вы делаете с URL-адресом, то есть как вы получаете данные и что вы с ними делаете.

Самый простой подход к этой проблеме — заменить hobbies функцией, которая принимает URL-адрес в качестве параметра. Функция может быть частью службы, как предполагает другой ответ, что делает ее широко используемой повторно. Если вы извлекаете данные через запрос, вы, вероятно, захотите использовать асинхронный канал, и ваша функция будет возвращать Observable или обещание. Например:

<mat-form-field>
    <mat-select placeholder="Hobby" name="hobby">
        <mat-option *ngFor="let hobby of hobbiesService.getHobbies('api/getHobbyOptions') | async" [value]="hobby.value">
            {{hobby.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

Код услуги:

@Injectable()
export class HobbiesService {
  getHobbies(url): Observable<any[]> {
    if (url) {
      return ... // fetch data from url and return Observable;
    }
  }
}

Вам нужно будет внедрить службу в любой компонент приложения, который ее использует.

constructor(public hobbiesService: HobbiesService) {}

По сути, вы описываете обертку вокруг матового выбора, которая является очень распространенным шаблоном для углового материала, и то, как они намереваются ее использовать.

Вы бы написали какой-то компонент, например

@Component({
  selector: 'my-mat-select-wrapper',
  templateUrl: './my-mat-select-wrapper.html',
})
export class MyMatSelectWrapper {
  @Input() srvUrl: string;
  @Input() placeholder: string;
  @Input() name: string;
  options$: Observable<{value: any, viewValue: string}[]>

  constructor(private myApiService: MyApiService) { }

  ngOnInit() {
    this.options$ = this.myApiService.get(this.srvUrl);
  }


}


<mat-form-field>
    <mat-select [placeholder]="placeholder" [name]="name">
        <mat-option *ngFor="let opt of options$ | async" [value]="opt.value">
            {{opt.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

Тогда использование еще проще:

<my-mat-select-wrapper placeholder="Hobby" name="hobby" srvUrl="api/getHobbyOptions"></my-mat-select-wrapper>

Теперь важно, как получить значение? Вы можете реализовать средство доступа к контрольному значению в оболочке, но гораздо более простой вариант — использовать реактивные формы и передавать элемент управления формы, который вы хотите использовать в качестве ввода, например:

@Component({
  selector: 'my-mat-select-wrapper',
  templateUrl: './my-mat-select-wrapper.html',
})
export class MyMatSelectWrapper {
  @Input() fc: FormControl
  @Input() srvUrl: string;
  @Input() placeholder: string;
  @Input() name: string;
  options$: Observable<{value: any, viewValue: string}[]>

  constructor(private myApiService: MyApiService) { }

  ngOnInit() {
    this.options$ = this.myApiService.get(this.srvUrl);
  }


}


<mat-form-field>
    <mat-select [placeholder]="placeholder" [name]="name" [formControl]="fc">
        <mat-option *ngFor="let opt of options$ | async" [value]="opt.value">
            {{opt.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>


<my-mat-select-wrapper [fc]="myFormControl" placeholder="Hobby" name="hobby" srvUrl="api/getHobbyOptions"></my-mat-select-wrapper>

Вы можете создать service для получения данных и загрузить их в переменную в .ts и bind в эту переменную в HTML.

Справочный компонент HTML

<mat-form-field>
    <mat-select placeholder="Hobby" name="hobby" [(ngModel)]="selectedValue">
        <mat-option *ngFor="let hobby of hobbies" [value]="hobby.value">
            {{hobby.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

  <p> Selected value: {{selectedValue}} </p>

Скрипт компонента

@Component({
  selector: 'select-form-example',
  templateUrl: './select-form-example.html',
})
export class SelectFormExample {
  hobbies = [
    {value: 'cricket-0', viewValue: 'Cricket '},
    {value: 'football-1', viewValue: 'Football'},
    {value: 'books-2', viewValue: 'Books'}
  ];


   // setting this is the key to initial select.
   selectedValue: string = this.hobbies[0].value;
}