Html 使用2页以角度过滤表格

我是angular的新手，我想知道如何制作它，这样我就可以有一个页面，您可以将要筛选的信息放入表格中，当您按下“搜索”按钮时，它将引导您进入第二个页面，您可以在过滤后看到表格

我觉得我的问题很奇怪，但我真的找不到任何答案如何在网上做到这一点

我不能共享代码，因为它是我工作的机密

类似于此网站的内容：

---

我已经尝试过使用模拟数据，但仍然无法将我的头脑放在正确的事情上。

我建议您使用过滤器组件和结果组件以及第三个容器组件的简单解决方案。此组件将获取筛选条件作为输入变量，并在您按下“筛选”按钮时输出筛选条件（使用输出变量）

容器应用程序将如下所示：

<filterComponent (onFilter)="changeFilter($event)" [data]="someDate" *ngIf="!filterCriteria"></filterComponent>

<resultsComponent [data]="someDate" [filterCriteria]="filterCriteria" *ngIf="!!filterCriteria"></resultsComponent>

---

发送到第二个tableComponent的filterCriteria将来自第一个tableComponent的EventMiter。filterCriteria变量将被初始化为null，这将允许您从一个表切换到另一个表。

实现这一点的方法有多种

使用提供程序

假设您有两个页面，serach页面是您输入过滤器的地方，结果页面是表呈现的地方

在搜索页面中，您将创建输入（例如：文本框、下拉列表等），并为所有输入创建ngModels，或者您可以使用角度反应形式，即FormGroup和FormControls。用户将选择他们的输入并单击搜索按钮，该按钮将从模型或控件中读取值并将其存储在提供程序中

搜索页面.component.html

<form [formGroup]="searchForm" (submit)="search()">
    <input formControlName="country" />
    <input formControlName="city" />
    ...
    <input type="submit">
</form>

// same as before

search.service.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.searchService.setData({ country, city });
        this.router.navigate(['/result']); // '/result' is path on the result-page
    }
    ...
}

@Injectable()
export class SearchService {
    _data : any;
    set data(val) {
        this._data = val;
    }
    get data() {
        return this._data;
    }
}

export class ResultPage {
    ...
    ngOnInit() {
        const filters = this.searchService.getData();
        // filters will be your data from previous page
    }
    ...
}

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
    }
    ...
}

export class ResultPage {
    ...
    constructor(route:ActivatedRoute) {
        this.country = route.snapshot.paramMap.get("country")

        // alternatively you can also do below
        route.paramMap.subscribe(filters => {
            // you will have your filters here
        });
    }
    ...
}

结果页.component.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.searchService.setData({ country, city });
        this.router.navigate(['/result']); // '/result' is path on the result-page
    }
    ...
}

@Injectable()
export class SearchService {
    _data : any;
    set data(val) {
        this._data = val;
    }
    get data() {
        return this._data;
    }
}

export class ResultPage {
    ...
    ngOnInit() {
        const filters = this.searchService.getData();
        // filters will be your data from previous page
    }
    ...
}

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
    }
    ...
}

export class ResultPage {
    ...
    constructor(route:ActivatedRoute) {
        this.country = route.snapshot.paramMap.get("country")

        // alternatively you can also do below
        route.paramMap.subscribe(filters => {
            // you will have your filters here
        });
    }
    ...
}

使用路由参数

搜索页面.component.html

<form [formGroup]="searchForm" (submit)="search()">
    <input formControlName="country" />
    <input formControlName="city" />
    ...
    <input type="submit">
</form>

// same as before

搜索页面.component.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.searchService.setData({ country, city });
        this.router.navigate(['/result']); // '/result' is path on the result-page
    }
    ...
}

@Injectable()
export class SearchService {
    _data : any;
    set data(val) {
        this._data = val;
    }
    get data() {
        return this._data;
    }
}

export class ResultPage {
    ...
    ngOnInit() {
        const filters = this.searchService.getData();
        // filters will be your data from previous page
    }
    ...
}

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
    }
    ...
}

export class ResultPage {
    ...
    constructor(route:ActivatedRoute) {
        this.country = route.snapshot.paramMap.get("country")

        // alternatively you can also do below
        route.paramMap.subscribe(filters => {
            // you will have your filters here
        });
    }
    ...
}

结果页.component.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.searchService.setData({ country, city });
        this.router.navigate(['/result']); // '/result' is path on the result-page
    }
    ...
}

@Injectable()
export class SearchService {
    _data : any;
    set data(val) {
        this._data = val;
    }
    get data() {
        return this._data;
    }
}

export class ResultPage {
    ...
    ngOnInit() {
        const filters = this.searchService.getData();
        // filters will be your data from previous page
    }
    ...
}

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
    }
    ...
}

export class ResultPage {
    ...
    constructor(route:ActivatedRoute) {
        this.country = route.snapshot.paramMap.get("country")

        // alternatively you can also do below
        route.paramMap.subscribe(filters => {
            // you will have your filters here
        });
    }
    ...
}

一旦在结果页中有了过滤器的值，就可以使用它们来获取数据，或者过滤已经获取的数据，然后相应地呈现表

---

如果我不清楚，请告诉我。

您好，我不太明白您的意思，您能详细说明一下吗。我定义了一个名为filterCriteria的变量，并将其值初始化为null。这可以是您想要的任何类型，甚至是一组筛选条件。当父组件第一次加载时，它显示过滤器组件，因为有一个ngIf子句！过滤标准。由于第一个值为null，因此将显示过滤器并隐藏结果。按下“过滤器”后，过滤器标准将包含过滤器条件。这将反映到resultsComponent，现在filterComponent将不显示，而您将得到结果。