Angular API变量不反映模板中的结果,但在ts类文件中

时间:2019-04-11 12:19:03

标签: html angular data-binding

我正在进行API调用,并且该API调用成功返回了打印在控制台中的数据。日志

但是,当我在模板中使用相同的变量时,它保留默认值,在这种情况下为空数组。

我为此使用了通用名称。

import { Component, OnInit } from '@angular/core';
import { DataService } from '@app/core/api/mainmenu/data.service';
import { MenuBlockModel } from '@app/core/models/menu-block.model';

@Component({
    selector: 'app-mainmenu',
    templateUrl: './mainmenu.component.html',
    styleUrls: ['./mainmenu.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MainmenuComponent implements OnInit {

    public menuBlock: MenuBlockModel = [];
    public dummyString: string = 'This works';
    constructor(
        public DataService: DataService,
    ) {
    }

    public ngOnInit(): void {
        this.DataService.getData$()
            .subscribe(result => {
                this.menuBlock = result.menuBlocks;
                // Console log displays results
                console.log('this.menuBlock', this.menuBlock);
            });
    }

}

和不显示的变量:

<html>
    {{menuBlock | json}} // []
    {{menuBlock}} // nothing displayed
    {{dummyString}} // 'This works'
</html>

0 个答案:

没有答案