处理错误:Angular 中的“提供的数据源与数组、Observable 或 DataSource 不匹配”

Handling Error: "Provided data source did not match an array, Observable, or DataSource" in Angular

提问人:luca88 提问时间:11/12/2023 最后编辑:luca88 更新时间:11/14/2023 访问量:107

问:

我在处理错误时遇到了问题。

未捕获错误,因为我对获取现有记录的响应不同,而对不存在的记录的响应不同。

我在“subscribe()”中的这两个组件中出现错误:

export class TableViewComponent implements OnInit, OnDestroy {
  private subscribe$: Subject<void> = new Subject<void>();
  columns: string[] = ['name', 'description', 'isCompleted'];
  tasks: ToDoTask[] = [];
  currentlySelectedTable: DefaultTable = {};

  constructor(private toDoTasksService: ToDoTasksService, private activeTableService: ActiveTableService) {
    this.activeTableService.activeTable.subscribe(selectedTable => {
      this.currentlySelectedTable = selectedTable;
      this.getTasks();
      this.refreshTable();
    });
  }

  ngOnInit() { }

  getTasks() {
    this.toDoTasksService
      .tasksGet(this.currentlySelectedTable.id)
      .pipe(takeUntil(this.subscribe$))
      .subscribe({
        next: (tasks: ToDoTask[] | any) => {
          if (!Array.isArray(tasks)) {          
            tasks as any;            
            throw Error(tasks.title);
          } else {
            this.tasks = tasks;                    
          }          
        },
        error: (error) => {
          console.error(error);
        },
      });
  }
export class TablesListComponent implements OnInit, OnDestroy {
  private subscribe$: Subject<void> = new Subject<void>();
  tables: DefaultTable[] = [];

  constructor(private tableService: TablesService, private activeTableService: ActiveTableService) {}

  ngOnInit() {
    this.tableService
      .tablesGet()
      .pipe(takeUntil(this.subscribe$))
      .subscribe({
        next: (tables: DefaultTable[]) => {
          this.tables = tables;
        },
        error: (error: any) => {
          console.error(error);
        },
      });
  }

  tableElementClicked(event: MouseEvent) {
    const htmlElement: HTMLParagraphElement = event.currentTarget as HTMLParagraphElement;

    this.tables.forEach(table => {
      if (table.name === htmlElement.textContent) {
        this.activeTableService.activeTable.next(table);
        
        return;
      }
    });
  }

  ngOnDestroy() {
    this.subscribe$.unsubscribe();
  }
}

Id 存在的表的响应:

enter image description here

Id 不存在的表的响应:

enter image description here

两种情况下,后端的状态代码都是 OK = 200。

使用的服务由 OpenAPI Generator 自动生成,并且有信息不能手动编辑类。

我已经检查了 SO 是否有类似的问题,但它们似乎对我的情况都没有帮助,但也许我错过了一些东西。

感谢您的任何帮助或建议。

编辑:

我已经编辑了getTasks()方法,并在DevTools / Console中获得了几乎安全的结果:

enter image description here

Angular 错误处理 数据源 angular-material-table

评论

1赞 Eliseo 11/12/2023
如果出现错误,订阅将落入“错误”状态,如果响应任何对象,则订阅将落入“错误”状态。您可以检查响应是否为数组:stackoverflow.com/questions/951483/...
0赞 luca88 11/14/2023
@Eliseo 谢谢,我已经更新了帖子。你建议改变/添加一些东西吗?

答: 暂无答案