我如何将字段名称动态传递给组件

Question

我正在尝试基于来自 Angular Material 的 mat-select / mat-option 组件构建可重用组件。

我的模板是这样的

<mat-select
    #select  
    placeholder="Tract List"
    formControlName ="multiselect"
    multiple>
    <div class="select-all">
        <mat-checkbox 
            (change)="toggleAllSelection()">{{selectAllText}}</mat-checkbox>
    </div>
    <mat-option (click)="optionClick()" *ngFor="let List of  data" [value]="List.guid">{{ List.name}}</mat-option>
</mat-select>

我正在寻找的是一种传递实际 [值] 字段和当前显示的内容的方法 {{List.name }} 理想情况下，我希望能够指定要使用的字段名称，甚至能够指定一个字符串，例如 List.text2 + " - " + List.id

我怎样才能做到这一点？

Answer 1

有几种方法可以实现这一点，但最容易解释和理解的是在组件之间使用简单的 'property binding'： https://angular.io/guide/property-binding

您可以用您的代码创建一个组件（例如，名称为 'app-mymultiselect'），并向其添加两个 Input 属性（数据和fieldNameToShow) :

import { Component } from "@angular/core";
...
@Component({
    selector: 'app-mymultiselect',
    templateUrl: './mymultiselect.component.html',
    styleUrls: ['./mymultiselect.component.scss']
})
export class MymultiselectComponent{

@Input() data!: any[]; // Type it depending on your data list elements
@Input() fieldNameToShow: string = 'name'; // name or id or whatever you like by default
...

在它的 HTML 中，是这样的：

<mat-option (click)="optionClick()" *ngFor="let List of data" [value]="List.guid">{{ List[fieldNameToShow] }}</mat-option>
</mat-select>

然后，要在您的任何组件中使用它，您只需在 HTML 中添加如下内容：

<app-mymultiselect [data]="youArrayOfElements" [fieldNameToShow]="fieldNameToShow"></app-mymultiselect>

作为其在 ts 文件中的值：

'youArrayOfElements' variable/attribute 包含您希望 select 显示的对象列表。
'fieldNameToShow' 一个 variable/attribute 字符串，包含您要显示的对象的名称（例如，fieldNameToShow = 'id'）；

我如何将字段名称动态传递给组件

How can i pass field names dynamicly to the a component

angular-material

angular