时间戳

首页 > 解决方案 > 角度过滤形式

angular - 角度过滤形式

问题描述

我尝试使用 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。

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

我的代码：

客户评级.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>

客户评级.route.ts

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

...

客户评级.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();
    }

客户评级.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'
        });
    }

标签： angular

解决方案

我认为您错过]了 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>

推荐阅读