angular - 如何根据对象以 Angular 选择表格行？

Question

大家好，我有一个场景，我真的很困惑如何弄清楚......!!

情况是我有

1)垫子台(即 Angular 料台)

2)详细信息 View ，根据表中特定行的点击显示详细信息。

3)作为数据源的对象列表..!!

我在该行的单击事件上传递该对象，该对象传递到详细信息 View ，并且现在显示该特定行的详细信息，问题是....!!

我有相同的数据源，即详细信息 View 的对象列表，因为我有两个按钮，例如 > < 分别基于单击从列表中选择元素并在详细信息中显示查看。

因此，根据详细信息 View ，我需要选择表中的特定行..!!随着详细信息 View 的更新，需要更新行的选择。

那么我怎样才能实现这一目标呢？

这是我的代码

export class Question {

    private questionText: String;
    private qid: String;
    private category: String;
    private author: String;
    private level: String;

    constructor(qid:String,category:String,author:String,level:String,questionText:String){
        this.qid=qid;
        this.category=category;
        this.author=author;
        this.level=level;
        this.questionText=questionText;
    }

    /**
     * getQuestionText
     */
    public getQuestionText() {
        return this.questionText;
    }

    /**
     * getQuestionText
     */
    public getqid() {
        return this.qid;
    }

    /**
     * getQuestionText
     */
    public getcategory() {
        return this.category;
    }

    /**
     * getQuestionText
     */
    public getauthor() {
        return this.author;
    }

    /**
     * getlevel
     */
    public getlevel() {
        return this.level;
    }
}

上面是模型类

public questions:Array<Question> = [
    new Question("1","TEXT_FREE","Harry","1","Write an essay on Lion"),
    new Question("2","TEXT_SC","Harry Potter","2","Write an essay on tiger"),
    new Question("3","TEXT_MC","Harry Motter","3","Write an essay on cheetah"),
    new Question("4","TEXT_BC","Harry Bobber","4","Write an essay on Leapord"),
  ];

上面是我的对象数组

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

                                <!-- QID Column -->
                                <ng-container matColumnDef="qid">
                                    <th mat-header-cell *matHeaderCellDef> QID </th>
                                    <td mat-cell *matCellDef="let element"> {{element.qid}} </td>
                                </ng-container>

                                <!-- Name Column -->
                                <ng-container matColumnDef="questionText">
                                    <th mat-header-cell *matHeaderCellDef> Question Text </th>
                                    <td mat-cell *matCellDef="let element"> {{element.questionText}} </td>
                                </ng-container>

                                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                            </table>

上面是我的垫子 table

最阻碍我的小鬼事情

1)单击时在该行上应用一个类，就像我单击第二行一样，只有该行必须突出显示..!!

2)索引时需要选择表格的行或者说从详细信息 View 传递的整个对象。

Answer 1

当您使用 MatTable 并在行定义中时，您可能使用类似 <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 的东西，我想说你可以尝试添加一个索引并用它打开对话框 - 传递带有索引的数据源对象并基于它你甚至可以选择向 MatTable 报告你已经减少或增加了第二个。

喜欢<mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" (click)="openSelected(datasource, i)"></mat-row>

“选择”只是一个技巧，看看 let i = index 是否有效。等于您给出的索引，仅此而已。我想象(click)="openSelected(datasource, i)将为详细信息 View 的绑定(bind)设置一些值，显示它，该 View 中的箭头将发出事件，因此在主组件中您可以根据需要设置“selectedIndex”字段。

您可以看一下我的应用程序的示例代码 here 。我已经使用了那里的图像库，并且在图像更改时我还更改了底层的“选定”行。这可能是您或多或少想做的事情。

onGalleryImageChange(index: number) {
    this.selectedFileForGallery = this.data[index];
    this.selectedRow = this.selectedFileForGallery;
  }

在 View 中:

<tr
        mat-row
        fxLayout="column"
        fxLayoutAlign="center"
        *matRowDef="let file; columns: columnsToDisplay; let i = index"
        matTooltipClass="multiline-tooltip"
        [matTooltip]="getFileTooltip(file)"
        (mouseenter)="mouseEnter(file)"
        (mouseleave)="mouseLeave()"
        (click)="openGallery(i)"
      ></tr>
    </table>

还有

<td mat-cell *matCellDef="let file">
          <div
            fxLayout="row"
            fxLayoutAlign="space-between center"
            class="row-action"
            [class.row-action-hover]="file === selectedRow"
          >