How to use async pipe correctly?

Question

PHP

Hello, I am getting this error:

core.js:6210 ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (common.js:4212)
    at AsyncPipe._selectStrategy (common.js:4314)
    at AsyncPipe._subscribe (common.js:4304)
    at AsyncPipe.transform (common.js:4292)
    at Module.ɵɵpipeBind1 (core.js:25782)
    at DataComponent_div_10_Template (data.component.html:54)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshEmbeddedViews (core.js:10591)
    at refreshView (core.js:9490)

here is the component.ts code:

getDataTypeArr(): void {
    this.arrDataType$ = this.dataService.getArrInSelectDataType().pipe(take(1)).subscribe( (res: []) => {
      console.log('Arr DATA TYPE', res);
    });
  }
  ngOnInit(): void {

    this.getDataTypeArr();

  }

Here is the line from which I output the resulting array:

<div class="box-for-select">
          <mat-form-field  appearance="standard">
            <mat-label>Select data type</mat-label>
            <mat-select>
              <mat-option>None</mat-option>
              <mat-option *ngFor="let item of arrDataType$ | async " [value]="item">
                {{item}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>

The console displays the array that came.
Arr DATA TYPE (3) ["CRYPTO", "FX", "USSTOCK"]
But nothing is displayed on the page. Please tell me what is wrong. Very necessary.

Answer 1

static call to dynamic method, should be $this->getMenuHtml

Answer 2

first, why does the controller generate html code? It is not right.
second, what does the menu have to do with the User controller?;
well, on the topic, you have already been pointed out where the error is - self::getMenuHtml($category['childs'])

Answer 3

No need to subscribe!!!!