如果页面刷新，Material Table 会导致 401 Unauthorized 错误

Question

我的 mat-table 显示了从 .Net Core 服务器端的 httpget 方法检索到的数据。但是，当页面刷新或在主组件中启动表格时，我收到以下错误：

NodeInvocationException: Http failure response for http://localhost:5649/api/Project/GetProjectList: 401 Unauthorized

• 组件：

  @Component({
  selector: 'home',
  templateUrl: './home.component.html'}) 
  
  export class HomeComponent implements AfterViewInit  {
  displayedColumns = ['ProjectId', 'ProjectTitle'];
  dataSource = new MatTableDataSource<Project>(); 
  
  constructor(private projectSerivce: ProjectService, private http: 
  HttpClient, @Inject('BASE_URL') baseUrl: string) {
  this.URLstring = baseUrl; 
  }
  
  ngAfterViewInit() {
  this.projectSerivce.getProj().subscribe(data => {
   console.log("Total No: "+data.length);
  this.dataSource.data = data });}
  }
  

• 项目服务

      @Injectable()
      export class ProjectService {
      baseUrlH: string;
      constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
      this.baseUrlH = baseUrl
      }
  
      getProj(): Observable<Project[]> { 
      const href = this.baseUrlH + 'api/Project/GetProjectList';
      return this.http.get<Project[]>(href).map(Response => 
      <Project[]>Response); 
      }
      }
  

• 数据源

  export class projDataSource implements DataSource<any> {
  
  private recProj = new BehaviorSubject<Project[]>([]);
  
  constructor(private projService: ProjectService) {
  }
  
  connect(): Observable<Project[]> {
      this.projService.getProj().subscribe({ next: (value) => { this.recProj.next(value)}})
      return Observable.merge(this.recProj);
  }
  
  disconnect(){        
  }
  }
  

• 服务器端 API

  [HttpGet("[action]")]
  [AllowAnonymous]
  public async Task<IEnumerable<Project>> GetProjectList()
   {
  IEnumerable<Project> ProjectList;
  using (TAMS_DBcontext db = new TAMS_DBcontext())
  {
  ProjectList = await db.Project.ToListAsync();
  }
  return ProjectList;
  }
  

为什么当我导航到这个组件时会成功检索数据，但如果刷新页面则不会重新启动？另外，如果在启动应用程序时在主组件中启动表，为什么会出现错误？

• 服务器端：.Net Core 2.0（Windows 身份验证）
• 正面：Angular 5.2.3

Answer 1

401 Unauthorized Error是一个HTTP响应状态码，表示客户端发送的请求无法被认证。

Answer 2

将数据变量声明为项目类型

@组件（{

选择器：“家”，

templateUrl: './home.component.html'

})

数据：项目；

导出类 HomeComponent 实现 AfterViewInit {

displayedColumns = ['ProjectId', 'ProjectTitle'];

dataSource = new MatTableDataSource();

构造函数（私有项目服务：ProjectService，私有http：

HttpClient, @Inject('BASE_URL') baseUrl: string) {

this.URLstring = baseUrl;

}

ngAfterViewInit() {

this.projectSerivce.getProj().subscribe(data => {

console.log("总数："+data.length);

this.data = data });}

}

Answer 3

ngAfterViewInit() {
    this.projectSerive.getProj().map((simpleItems) => {
        console.log("LL:" + simpleItems.length);
        this.dataSource.data = simpleItems;
        return simpleItems; 
    }).catch((exception) => {
            console.log(exception);
            return of(exception);
        }).subscribe(data => {});
}

以上改动解决了问题。存储来自.map() 而不是subscribe() 的数据是解决方案，虽然我不知道为什么！