角度过滤形式答案

【问题标题】：Angular filtering form角度过滤形式
【发布时间】：2019-03-16 23:19:32
【问题描述】：

我尝试使用 Angular 实现按日期范围过滤的表单。按下按钮后没有任何反应。看起来没有选择路线。当我刚刚改变时

[routerLink]="['/clients-rating/filtered',startDate,endDate" 到

[routerLink]="['/clients-rating/filtered','2019-03-01',2019-03-10" 我看到了网址：http://localhost:9000/#/clients-rating/filtered/2019-03-01/2019-03-10。

为什么输入的值没有从表单传输到组件？

我的代码：

clients-rating.component.html

<html>
    <body>
        <div>
           <input type="text" class="form-control" name="phone" id="start_date" 
                [(ngModel)]="startDate"/>
           <input type="text" class="form-control" name="phone" id="end_date" 
                [(ngModel)]="endDate"/>
           <button 
                [routerLink]="['/clients-rating/filtered',startDate,endDate" 
                class="btn btn-primary float-left 
                jh-create-entity create-clients-rating">
                <fa-icon [icon]="'eye'"></fa-icon>
           </button>
       </div>
     <body>
<html>

clients-rating.route.ts

{
    path: 'clients-rating/filtered/:startDate/:endDate',
    component: ClientsRatingComponent,
    data: {
        authorities: ['ROLE_USER'],
    },
    canActivate: [UserRouteAccessService]
},

...

clients-rating.component.ts

export class ClientsRatingComponent implements OnInit, OnDestroy {
    clientsRatings: IClientsRating[];
    startDate: String;
    endDate: String;

    constructor(
        protected clientsRatingService: ClientsRatingService,
        protected jhiAlertService: JhiAlertService,
        protected eventManager: JhiEventManager,
        protected accountService: AccountService,
        protected activatedRoute: ActivatedRoute
    ) {
    }

    loadAll() {
        this.clientsRatingService.query().subscribe(
            (res: HttpResponse<IClientsRating[]>) => {
                this.clientsRatings = res.body;
            },
            (res: HttpErrorResponse) => this.onError(res.message)
        );
    }

    ngOnInit() {
        this.startDate =  this.activatedRoute.snapshot.paramMap.get('startDate');
        this.endDate = this.activatedRoute.snapshot.paramMap.get('endDate');
        if (this.startDate == null || this.endDate == null) {
            this.loadAll();
        } else {
            this.clientsRatingService.filterByDate(this.startDate,  this.endDate);
        }
            this.accountService.identity().then(account => {
                this.currentAccount = account;
            });
        this.registerChangeInClientsRatings();
    }

client-rating.service.ts

@Injectable({ providedIn: 'root' })
export class ClientsRatingService {

 filterByDate(startDate: String, endDate: String,req?: any) {
        const options = createRequestOption(req);
        return this.http.get<IClientsRating[]>(`${this.resourceUrl}/filter /${startDate}/${endDate}`, {
            params: options,
            observe: 'response'
        });
    }

【问题讨论】：

我想你错过了] 的 routerLink
您的预期行为是什么？
我在此处复制/粘贴时错过了“]”。在我的代码中，我有
您可以尝试发布的答案也提供来自 app.module.ts 的代码
我在此处复制/粘贴时错过了“]”，但在我的代码中我有“]”。我希望收到对 url localhost:9000/#/clients-rating/filtered/2019-03-01/2019-03-10 的请求，其中“2019-03-01”和“2019-03-10”是输入表单元素的值。

标签： angular

【解决方案1】：

我认为您错过了为 RouterLink 关闭 ]。

但我会将Router.navigate 与按钮的（单击）事件一起使用：

TS 代码：

首先，导入路由器：

import { Router } from '@angular/router';

constructor(private router : Router) {} 

navigateTo(){
  this.router.navigate(['clients-rating/filtered/' + startDate + '/'+endDate+'']);
}

HTML 代码：

<html>
    <body>
        <div>
           <input type="text" class="form-control" name="phone" id="start_date" 
                [(ngModel)]="startDate"/>
           <input type="text" class="form-control" name="phone" id="end_date" 
                [(ngModel)]="endDate"/>
           <button (click)="navigateTo()" class="btn btn-primary float-left jh-create-entity create-clients-rating">
                <fa-icon [icon]="'eye'"></fa-icon>
           </button>
       </div>
     <body>
<html>

【讨论】：

this.router.navigate(['clients-rating/filtered/' + this.startDate + '/' + this.endDate ]) 不起作用，但是 this.router.navigate([ 'clients-rating/filtered/' + this.startDate + this.endDate ]) 有效。