要解决“Angular 6 - 路由未发生 - Mat-table 行”问题,需要检查以下几个方面:
确保路由器正确配置并且导航到正确的组件。检查app.module.ts文件中的路由配置,确保路由路径正确,并且路由导航到包含Mat-table行的组件。
确保在路由导航后正确加载Mat-table数据。在组件的ngOnInit()函数中,确保通过适当的方法加载Mat-table的数据。这可以是从服务中获取数据,或者从本地变量中加载。
下面是一个示例代码,演示如何在Angular 6中使用Mat-table和路由导航:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my-component/my-component.component';
const routes: Routes = [
{ path: '', redirectTo: '/my-component', pathMatch: 'full' },
{ path: 'my-component', component: MyComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
dataSource: any[];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.dataSource = data;
});
}
}
Name
{{element.name}}
Age
{{element.age}}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getData() {
return this.http.get('https://api.example.com/data');
}
}
确保将上述代码与您的项目进行适当的调整,并根据您的需求进行修改,以使其适应您的项目。