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 });}
}

ProjectService

    @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); 
    }
    }

DataSource

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

将数据变量声明为Project

的类型

@Component（{

选择器：'home'，

templateUrl：'。/ home.component.html'

}）

数据：项目;

导出类HomeComponent实现AfterViewInit {

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

dataSource = new MatTableDataSource（）;

构造函数（private projectSerivce：ProjectService，private http：

HttpClient，@ Inject（'BASE_URL'）baseUrl：string）{

this.URLstring = baseUrl;

}

ngAfterViewInit（）{

this.projectSerivce.getProj（）。subscribe（data =＆gt; {

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()的数据是解决方案，但我不确定原因！

如果页面刷新，材料表会导致401 Unauthorized错误

3 个答案: