英文:
How to get initial table data after filterdata is applied on table in IBM-carbon (Angular)?
问题
搜索栏：
<ibm-table-toolbar-search [expandable]="true" placeholder="在仪表板中搜索" (change)="searchValueChange($event.value)"></ibm-table-toolbar-search>
搜索值改变函数：
searchValueChange(value: string) {
this.model.data = this.model.data.filter(
(item) => item[0].data.includes(value) || item[1].data.includes(value)
)
}
在应用搜索过滤器后，清除搜索栏上的内容后，无法获取初始数据。
英文:
The search bar:
<ibm-table-toolbar-search [expandable]="true" placeholder="Search in Dashboard" (change)="searchValueChange($event.value)"></ibm-table-toolbar-search>
The search value change function:
searchValueChange(value: string) {
this.model.data = this.model.data.filter(
(item) => item[0].data.includes(e.value) || item[1].data.includes(e.value)
)
}
After applying the search filter I am unable to get intial data on clearing the search bar.
答案1
得分: 0
copyData = this.model.data;
searchValueChange(value: string) {
if(value){
this.model.data = this.model.data.filter(
(item) => item[0].data.includes(e.value) || item[1].data.includes(e.value)
)
}else{
this.model.data = this.copyData
}
}
英文:
copyData = this.model.data;
searchValueChange(value: string) {
if(value){
this.model.data = this.model.data.filter(
(item) => item[0].data.includes(e.value) || item[1].data.includes(e.value)
)
}else{
this.model.data = this.copyData
}
}
答案2
得分: 0
尝试这个：
import { Component, Input, OnInit } from "@angular/core";
import {
TableModel,
TableItem,
TableHeaderItem
} from "carbon-components-angular";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular";
copyData = [];
@Input() model = new TableModel();
ngOnInit() {
this.model.header = [
new TableHeaderItem({ data: "姓名" }),
new TableHeaderItem({ data: "地址" })
];
this.model.data = [
[new TableItem({ data: "数据1" }), new TableItem({ data: "印度" })],
[new TableItem({ data: "数据2" }), new TableItem({ data: "美国" })],
[new TableItem({ data: "数据3" }), new TableItem({ data: "加拿大" })],
[new TableItem({ data: "数据4" }), new TableItem({ data: "中国" })],
[new TableItem({ data: "数据5" }), new TableItem({ data: "意大利" })]
];
this.copyData = [...this.model.data];
}
searchValueChange(value: string) {
if (value) {
this.model.data = this.model.data.filter(
item =>
item[0].data.toLowerCase().includes(value.toLowerCase()) ||
item[1].data.toLowerCase().includes(value.toLowerCase())
);
} else {
this.model.data = this.copyData;
}
}
}
英文:
Try this:
import { Component, Input, OnInit } from "@angular/core";
import {
TableModel,
TableItem,
TableHeaderItem
} from "carbon-components-angular";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular";
copyData = [];
@Input() model = new TableModel();
ngOnInit() {
this.model.header = [
new TableHeaderItem({ data: "Name" }),
new TableHeaderItem({ data: "Address" })
];
this.model.data = [
[new TableItem({ data: "Data1" }), new TableItem({ data: "India" })],
[new TableItem({ data: "Data2" }), new TableItem({ data: "USA" })],
[new TableItem({ data: "Data3" }), new TableItem({ data: "Canada" })],
[new TableItem({ data: "Data4" }), new TableItem({ data: "China" })],
[new TableItem({ data: "Data5" }), new TableItem({ data: "Italy" })]
];
this.copyData = [...this.model.data];
}
searchValueChange(value: string) {
if (value) {
this.model.data = this.model.data.filter(
item =>
item[0].data.toLowerCase().includes(value.toLowerCase()) ||
item[1].data.toLowerCase().includes(value.toLowerCase())
);
} else {
this.model.data = this.copyData;
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论