Question

我无法将用户数据加载到页面中。我收到此错误：GET http://localhost/ 401（未经授权）。

在Laravel中，我已将其放入控制器以获取所有用户数据：

public function index()
{
 $user = User::all(); return response()->json($user,201);
}

在Angular中，我使用以下代码创建了一个data.service文件：

@Injectable({
    providedIn: 'root'
})

export class DataService {
  constructor(private http: HttpClient) { }
  findAll(): Observable<User[]>{return this.http.get<User[]>('http://localhost');}
}

然后在app.component.ts文件中，我使用此方法获取数据：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  users$: User[];
  constructor(private dataService: DataService){}
  ngOnInit(){return this.dataService.findAll().subscribe(data => this.users$ = data);}
}

在app.component.html文件中，我遍历了数据：

<div *ngFor='let user of users$'>{{user.name}}</div>

Answer 1

这是angular或laravel返回的错误吗？另外请注意以下几点：

您未在本地主机上指定端口
您将user $定义为不可观察的数组，因此异步管道将无法工作，而是可以将user $声明为可观察的数组或删除异步管道。

这是更好的解决方案：

export class AppComponent implements OnInit{
  users$: Observable<User[]>;
  constructor(private dataService: DataService){}
  ngOnInit(){
    this.user$ = this.dataService.findAll()
  }
}

，并在HTML中保持当前代码不变：

<div *ngFor='let user of users$'>{{user.name}}</div>

Angular GET http：// localhost / 401（未经授权）错误

1 个答案: