Question

假设我们有一个mat-select组件

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

因此，对于每个选择组件，我们都需要获取选择选项并将其存储。起初这似乎很简单，但是如果我们有20个这样的选择组件怎么办。在敏捷开发中，这将花费大量时间且难以维护。现在，我们要从网址中填充选项，如下所示：

<mat-form-field>
    <mat-select placeholder="Hobby" name="hobby" srv_url=api/getHobbyOptions" ngModel>
    </mat-select>
</mat-form-field>

为了实现这一点，我尝试了许多选项，例如创建了自定义组件并插入到mat-select之间，例如：

<mat-form-field>
    <mat-select placeholder="Hobby" name="hobby" srv_url=api/getHobbyOptions" ngModel>
       <fill-options><fill-option>
    </mat-select>
</mat-form-field>

和<fill-options></fill-options>组件：

<mat-option *ngFor="let hobby of hobbies" [value]="hobby.value">
  {{hobby.viewValue}}
</mat-option>

最终目标：从父级获取 srv_url 并加载数据。
当前：仅迭代伪造的爱好数据，但是即使这样，选项也不会显示在mat select中。
还有其他想法吗？预先感谢

Answer 1

MatSelect不知道uploadForm是什么意思（我也不知道）。这是您编写的指令吗？还是只是在尝试将url定义为mat-select使用的属性？无论哪种方式，您都没有显示如何处理url，即如何获取数据以及如何处理数据。

解决此问题的最简单方法是将srv_url替换为以url作为参数的函数。另一个答案表明，该功能可能是服务的一部分，这使其可以广泛使用。如果要通过请求获取数据，则可能要使用异步管道并使函数返回Observable或promise。例如：

hobbies

服务代码：

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

Answer 2

您实际上是在描述mat-select周围的包装纸，这是一种非常常见的带有角形材料的图案，以及他们打算使用它的方式。

您将编写一些类似的组件

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

现在最大的问题是如何获得价值？您可以在包装器上实现控件值访问器，但是更简单的选择是使用反应形式，并传递您拥有的formcontrol用作输入，例如：

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

Answer 3

您可以创建一个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;
}

自动填充角度材料从URL中选择选项

3 个答案: