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上收到此错误类型“可观察”不能分配给类型“用户[]”。类型“可观察”中缺少属性“包含”。

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

注意：而且，此代码必须位于函数范围内，而不是像现在这样直接位于类内。

从服务获取数据到MatTableDataSource

2 个答案: