如何根据对象选择倾斜的表行? [英] How to select the table row in angular based on the object?
问题描述
您好，我有一种情况，在这种情况下，我真的很困惑如何解决... !!
场景是我有
1)垫台(即角材台)
2)还有一个详细信息视图，该视图根据表的特定行的点击显示详细信息.
3)对象列表作为数据源.. !!
我将对象传递给该行的click事件，然后该对象传递到详细信息视图，现在显示该特定行的详细信息.
我具有与详细信息视图的对象列表相同的数据源，因为我有两个按钮，如> <分别根据单击的前进和后退，我从基于索引的列表中选择元素，并显示在详细信息视图中.
因此，根据详细信息视图，我需要选择表中的特定行.由于详细信息视图更新需要更新对行的选择.
那我该如何实现呢?
这是我的代码
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)当从详细信息视图传递索引或说整个对象时，需要选择表的行.
- 要在课堂上申请课程，我们应该知道已经选择了相应的问题.因此，我们需要在
删除行上的类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); } }
您可以在此处
中找到有效的stackblitzHello 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.
- 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;
});
}
- 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屋！
