如何根据对象以角度选择表格行? [英] How to select the table row in angular based on the object?

问题描述

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

我有这个场景

1)垫台(即角料台)

2) 详细信息视图，显示基于点击表格特定行的详细信息.

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

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

我有相同的数据源，它是详细信息视图的对象列表，因为我有两个按钮，例如 ><向前和向后分别基于点击我从基于索引的列表中选择元素并显示在详细信息视图中.

因此，根据详细信息视图，我需要选择表中的特定行..！！由于详细信息视图更新需要更新行的选择.

那么我怎样才能做到这一点?

这是我的代码

导出类问题{私人问题文本:字符串；私人qid:字符串；私人类别:字符串；私人作者:字符串；私人级别:字符串；构造函数(qid:String,category:String,author:String,level:String,questionText:String){this.qid=qid;this.category=类别；this.author=作者；this.level=level;this.questionText=questionText;}/*** 获取问题文本*/公共 getQuestionText() {返回 this.questionText;}/*** 获取问题文本*/公共 getqid() {返回 this.qid;}/*** 获取问题文本*/公共 getcategory() {返回 this.category;}/*** 获取问题文本*/公共 getauthor() {返回 this.author;}/*** 获取级别*/公共 getlevel() {返回 this.level;}}

上面是模型类

公开问题:Array<问题>= [new Question("1","TEXT_FREE","Harry","1","Write an essay on Lion"),new Question(2",TEXT_SC",哈利波特",2",写一篇关于老虎的文章"),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"),];

上面是我的对象数组

<!-- QID 列--><ng-container matColumnDef=qid"><th mat-h​​eader-cell *matHeaderCellDef>QID </th><td mat-cell *matCellDef=let element">{{element.qid}} </td></ng-容器><!-- 名称列--><ng-container matColumnDef=questionText"><th mat-h​​eader-cell *matHeaderCellDef>问题文本</th><td mat-cell *matCellDef=let element">{{element.questionText}} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef=displayedColumns"></tr><tr mat-row *matRowDef="let row;列:displayedColumns;"></tr>

上面是我的垫子桌

大多数阻碍我的东西

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

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

解决方案

1. 要在行上应用类，我们应该知道选择了相应的问题.所以，我们需要在 Question 上有额外的属性，它告诉是否选择了问题.在此基础上，我们可以添加或使用 [ngClass]={ 'class-name' : <condition> 删除行上的类}

<块引用>

导出类问题{公共问题文本:字符串；公共qid:字符串；公共类别:字符串；公共作者:字符串；公共级别:字符串；公选?:布尔=假；构造函数(问题:问题){Object.assign(this, question);}}

并在模板文件中

以及选择行的逻辑

public getQuestion(问题:问题){this.removeSelection();this.selectedQuestion = 问题；this.selectedQuestion.selected = true;}私人删除选择(){this.questions.map((问题:问题) => {返回 question.selected = false;});}

<块引用>

2. 在详细信息视图中，您需要具有发出问题索引的事件发射器以在表中选择它

<块引用>

导出类 HelloComponent {@Input() 问题:问题；@Output() changeQuestion: EventEmitter <数量 >= 新事件发射器 <数量 >();公共以前的问题(){让索引 = +this.question.qid;指数 -= 1;this.changeQuestion.emit(index);}公共下一个问题(){让索引 = +this.question.qid;指数 += 1;this.changeQuestion.emit(index);}}

您可以从此处

找到正在工作的stackblitz

Hello folks I have one scenario in which I am really confused on how to figure out...!!

The scenario is I have

1)The mat table(that is the angular material table)

2)And a details view which shows the details based on the click of the particular row of the table.

3)list of objects as a data source..!!

I pass the object on the click event of the row and the object passes to the detail view and the details of that particular row is shown now the question is....!!

I have the same data source that is list of objects for details view in that I have two buttons like > < the forward and backward respectively based on the click I select the elements from the list baaed on index and show in the details view.

So according to the details view I need to select the particular row in my table..!! As the details view updates need to update the selection of the row.

So how can I achieve that?

Here goes my code

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

The above is the model class

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"),
  ];

above is my array of objects

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

the above is my mat table

most imp things that hinders me

1)Apply a class on the row when clicked like if I click the second row only that row must be highlighted..!!

2)Need to select the row of the table when the index or say the whole object passed from the details view.

解决方案

1. To apply class on row, we should know that respective question is selected. So, we need to have extra property on the Question, which tells whether question is selected or not. Based on that we can add or remove the class on row using [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);
  }
}

And in the template file

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

And logic to select the row

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

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

2. In the details view, you need to have event emitter which emits question index to select it in table

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);
  }
}

You can find the working stackblitz from here

这篇关于如何根据对象以角度选择表格行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！