从服务获取数据到 MatTableDataSource

Question

我正在尝试使用来自 CustomService 的数据填充 MatTableDataSource。

这是我的组件代码：

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

  displayedColumns = ['name', 'email', 'phone', 'company'];

  constructor(private userService: CustomService) {  }
  const USER_DATA: User[] = this.userService.getUser();
  dataSource = new MatTableDataSource(this.USER_DATA);

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }

}

服务代码：

  @Injectable()
    export class CustomService {
      test: boolean = true;
      private serviceUrl = 'https://jsonplaceholder.typicode.com/users';
      constructor(private http: HttpClient) { }

      getUser(): Observable<User[]> {
        return this.http.get<User[]>(this.serviceUrl);
      }
    }

在 VSCode 我在 USER_DATA 收到这个错误类型 'Observable' 不能分配给类型 'User[]'。属性 'includes' 在类型 'Observable' 中缺失。

Answer 1

您需要按如下方式订阅Observable，

 this.userService.getUser()
        .subscribe(users => { 
            this.USER_DATA= users; 
}, error => this.errorMessage = <any>error);

在构造函数上方声明 USER_DATA 为 ,

const USER_DATA: User[] =[];

Answer 2

您正在尝试将直接 observable 分配给常量

相反，您应该订阅它，然后按如下方式分配

const USER_DATA: User[]

constructor() {
   this.userService.getUser().subscribe((user) => {
      this.USER_DATA = user;
   });
}

注意：而且，此代码必须在函数范围内，而不是像您现在所做的那样直接在 class 内。

从服务获取数据到 MatTableDataSource

Getting data from service to MatTableDataSource

angular-material2

angular