代码之家 › 专栏 › 技术社区 › Vugar Abdullayev

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

angular-material2 angular-material angular

Vugar Abdullayev · 技术社区 · 6 年前

假设我们有一个组件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>

敏捷开发

<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_网址 从父级加载数据。

还有别的主意吗?提前谢谢

3 回复 | 直到 6 年前

G. Tranter 6 年前

MatSelect不知道 srv_url 意思是(我也不知道)。这是你写的指令吗?或者您只是试图将url定义为mat select使用的属性?不管怎样,你都没有展示你对url做了什么——也就是说,你是如何获取数据的,以及你对它做了什么。

解决这个问题最简单的方法是 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;
    }
  }
}

constructor(public hobbiesService: HobbiesService) {}

bryan60 6 年前

你本质上是在描述一个包裹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>

现在最重要的是如何获得价值?您可以在包装器上实现一个控制值访问器,但更简单的选项是使用反应式表单并传入要用作输入的表单控件,如:

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

Rohit.007 6 年前

service 获取数据并将其加载到 .ts 和 bind

引用组件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;
}