如何根据对象以角度选择表格行？

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

场景是我有

1）垫料台（即角料台）

2）以及一个详细信息视图，根据表中特定行的单击显示详细信息。

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

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

我有相同的数据源，即详细信息视图的对象列表，因为我有两个按钮，例如 >

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

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

这是我的代码

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>

上面是我的垫子桌

最阻碍我的事情

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

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

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

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

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

你可以看一下我的应用程序的示例代码here https://github.com/PWrGitHub194238/Chemistry-Home-Office/blob/master/src/app/features/admin/components/sent-homeworks-inner-files-table/sent-homeworks-inner-files-table.component.ts。我在那里使用了图像库，并且在图像更改时我还更改了底层的“选定”行。这可能是您或多或少想做的事情。

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

并在视图中：

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

And

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