代码之家 › 专栏 › 技术社区 › kushal Baldev

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

angular8 angular-material angular

kushal Baldev · 技术社区 · 5 年前

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

情况是我有

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) 需要在索引时选择表的行,或者说从详细信息视图传递整个对象。

0 回复 | 直到 5 年前

Eatos 5 年前

当您使用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) 将为详细信息视图的绑定设置一些值,显示它,该视图中的箭头将发出事件,因此在主组件中,您可以根据需要设置“selectedIndex”字段。

你可以看看我的应用程序的示例代码 here 。我使用了那里的图像库,在图像更改时,我也会更改底层的“选定”行。这可能是你或多或少想做的事情。

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>

还有

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

Sivakumar Tadisetti zeah 5 年前

要在行上应用类,我们应该知道选择了相应的问题。所以,我们需要在 Question ,其中告诉问题是否被选中。在此基础上,我们可以添加或使用以下命令删除行上的类 [ngClass]={ 'class-name' : <condition> }

export class Question {
  public questionText: string;
  public qid: string;
  public category: string;
  public author: string;
  public level: string;
  public selected ? : boolean = false;

  constructor(question: Question) {
    Object.assign(this, question);
  }
}

在模板文件中

<tr mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  (click)="getQuestion(row)"
  [ngClass]="{ 'selected-row' : row.selected }"
></tr>

以及选择行的逻辑

public getQuestion(question: Question) {
  this.removeSelection();
  this.selectedQuestion = question;
  this.selectedQuestion.selected = true;
}

private removeSelection() {
  this.questions.map((question: Question) => {
    return question.selected = false;
  });
}

在详细信息视图中,您需要有一个事件发射器来发出问题索引,以便在表中选择它

export class HelloComponent {
  @Input() question: Question;
  @Output() changeQuestion: EventEmitter < number > = new EventEmitter < number > ();

  public previousQuestion() {
    let index = +this.question.qid;
    index -= 1;
    this.changeQuestion.emit(index);
  }

  public nextQuestion() {
    let index = +this.question.qid;
    index += 1;
    this.changeQuestion.emit(index);
  }
}

您可以从以下网址找到工作堆栈闪电战 here

ahmed eid 4 年前

first : you can get with index like.
edit(index: number) {
this.row = this.yourObjectList[index];
}

second: you can get by object
edit(object: any) {
this.row = object;
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">edit</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let oject of yourObjectList; let i=index'>
      <th scope="row">{{ i+1 }}</th>
      <td>{{ oject.firstName }}</td>
      <td>{{ oject.lastName }}</td>
      <td (click)='edit(i or object)'></td>
    </tr>
    
  </ tbody >
</table>