Я реализую пользовательский интерфейс для проекта web api.У меня есть таблица, в которой отображаются компании из API-запросов с помощью углового материала:
<div class="example-container mat-elevation-z8">
<div class="example-loading-shade" *ngIf="isLoadingResults">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="data$ | async" class="example-table" matSort matSortActive="company_rating"
matSortDisableClear matSortDirection="asc">
<ng-container matColumnDef="company_rating">
<th mat-header-cell *matHeaderCellDef>rating</th>
<td mat-cell *matCellDef="let row">{{row.rating}}</td>
</ng-container>
<ng-container matColumnDef="company_id">
<th mat-header-cell *matHeaderCellDef>company_id</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>
<!-- other company data -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/company-detail/', row.id]" ></tr>
</table>
</div>
</div>
Проблема возникает, когда я нажимаю на компанию в таблице.С помощью этих строк
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/company-detail/', row.id]" ></tr>
страница должна измениться с http://localhost:4200/companies на http://localhost:4200/company-detail/[id], но это не так (изменяется только URL-адрес, а содержимое - нет):
Таким образом, отображается список компаний, но не информация о выбранной компании.И даже если я перезагружаю страницу, я получаю ту же страницу.
Дополнительный код: Маршрутизация приложений:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CompaniesComponent } from './companies/companies.component';
import { CompanyDetailComponent } from './company-detail/company-detail.component';
const routes: Routes = [
{
path: 'companies',
component: CompaniesComponent,
data: { title: 'List of Companies' }
},
{
path: 'company-detail/:id',
component: CompanyDetailComponent,
data: { title: 'Company Detail' }
},
{
path: '',
redirectTo: '/companies',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Компонент компании:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService } from '../api.service';
import { Company } from '../company';
@Component({
selector: 'app-company-detail',
templateUrl: './company-detail.component.html',
styleUrls: ['./company-detail.component.css']
})
export class CompanyDetailComponent implements OnInit {
constructor(private route: ActivatedRoute, private api: ApiService, private router: Router) { }
company: Company = { Id: null,
CompanyName: '', CompanyDescription: '', Rating: null, CompanyValuation: null, Salary: null, ProfessionalGrowth: null,
CompanyBenefits: null, CommunicationWithColleagues: null, EducationSector: null, NumberOfVotes: null}
isLoadingResults = true;
ngOnInit() {
this.getCompany(this.route.snapshot.params['id']);
}
getCompany(id) {
this.api.getCompany(id)
.subscribe(data => {
this.company = data;
console.log(this.company);
this.isLoadingResults = false;
});
}
}
Компонент компании:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ApiService } from '../api.service';
import { Company } from '../company';
import { Observable, of, throwError } from 'rxjs';
import { finalize } from 'rxjs/operators';
@Component({
selector: 'app-companies',
templateUrl: './companies.component.html',
styleUrls: ['./companies.component.css']
})
export class CompaniesComponent implements OnInit {
displayedColumns: string[] = ['company_rating', 'company_companyName', 'company_companyValuation', 'company_salary',
'company_professionalGrowth', 'company_companyBenefits', 'company_communicationWithColleagues', 'company_educationSector','company_id'];
//data: Company[] = [];
data$: Observable<Company[]>;
isLoadingResults = true;
constructor(private api: ApiService) { }
ngOnInit() {
this.data$ = this.api.getCompanies().pipe(
finalize(() => {
this.isLoadingResults = false;
}))
}
}
методы в api.service для получения данных из api:
getCompanies (): Observable<Company[]> {
return this.http.get<Company[]>(apiUrl+ '/getCompanies',httpOptions)
.pipe(
tap(v => console.log('fetched companies')),
catchError(this.handleError('getCompanies', []))
);
}
getCompany(id: number): Observable<Company> {
const url = `${apiUrl}/${id}`;
return this.http.get<Company>(url).pipe(
tap(_ => console.log(`fetched company id=${id}`)),
catchError(this.handleError<Company>(`getCompany id=${id}`))
);
}
Так как я могу перенаправить на другую страницу с помощью углового материала?