Angular функция декоратора свойства не вызывается

Question

Я пытаюсь создать универсальный c компонент таблицы, используя этот учебник . Я реализовал первую часть, но она не работает.

Вот мой декоратор:

export const tableSymbol = Symbol("table");
export function Column(options: Partial<ColumnModel> = {}) {
  return function(target: any, propertyKey: string) {
    if (!target[tableSymbol]) {
      target[tableSymbol] = new TableModel();
    }
    options.key = options.key || propertyKey;
    const columnOptions = new ColumnModel(options);
    target[tableSymbol].addColumn(columnOptions);
  };
}

и модель:

export class User {
  @autoserializeAs(Number)
  @Column()
  id: number;
  @autoserializeAs(String)
  @Column()
  name: string;
  @autoserializeAs(String)
  @Column()
  username: string;
}

и мой компонент:

export class TableComponent implements OnInit {
  private _data: User[];
  private _tableModel: TableModel;
  columns: ColumnModel[];
  displayedColumns: string[];

  @Input() set data(values: any[]) { // Because AsyncPipe is used
    if (values) {
      this._data = cloneDeep(values);
      if (values.length) {
        this._tableModel = this._data[0][tableSymbol];
        this.buildColumns();
      }
    }
  }
  get data(): any[] {
    return this._data;
  }
  private buildColumns() {
    this.columns = this._tableModel.columns;
    this.displayedColumns = this.columns.map(col => col.key);
  }
  constructor() {  }
  ngOnInit(): void {  }
}

Используется TableComponent здесь, в UserListComponent:

export class UserListComponent implements OnInit {
  constructor(private repository: UserRepository) {}

  ngOnInit(): void {}

  getUsers(): User[] {
    let repoUsers = this.repository.getUsers();
    return repoUsers;
  }
}

<common-table [data]="getUsers()"></common-table>

Хранилище выглядит так:

export class UserRepository {
  private users: User[] = [];
  constructor(private dataSource: RestDataSource) {
    this.dataSource.getUsers().subscribe(data => {
      this.users = <User[]> data;
    });
  }
  getUsers(): User[] {
    return this.users;
  }
}

И RestDataSource выглядит так:

const base_url = 'https://jsonplaceholder.typicode.com/';
export class RestDataSource {
  constructor(private http: HttpClient) {  }
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(`${base_url}users`);
  }
}

Когда я запускаю это, оно говорит, что tableSymbol не определен, что означает, что он не выполнял функцию Column. Я также загрузил свой исходный код здесь . Может кто-нибудь сказать мне, что я сделал не так?

Я использую angular V9.1 и машинопись V3.8

Answer 1

Оказалось, что это была проблема в моем источнике данных. У меня была функция, которая должна была возвращать Observable User s, но она не приводила объект к User. Я изменил это на это, и это сработало как шарм.

export class RestDataSource {
  constructor(private http: HttpClient) {   }
  getUsers(): Observable<User[]> {
    return this.http.get(`${base_url}users`)
      .pipe(
        map((res: JsonArray) => DeserializeArray(res, User))
      );
  }
}