数据未显示 Angular8（Metronic 主题）

Question

当我在我的 html {{user.firstName}} 中使用它时，数据显示但有错误但是当我在我的 html {{user?.firstName}} 中使用它时，数据不显示但是没有错误，但是当我单击一个按钮时，数据正在显示。大家好，我正在使用 metronic 和 angular8

关于如何显示数据，你们有其他人吗？

import { Component, OnInit, enableProdMode } from "@angular/core";
import { DealerapiService } from "../services/dealerapi.service";
import { DomSanitizer } from "@angular/platform-browser";
import { FormGroup, FormBuilder } from "@angular/forms";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "kt-home-profile",
    templateUrl: "./home-profile.component.html",
    styleUrls: ["./home-profile.component.scss"]
})
export class HomeProfileComponent implements OnInit {
    constructor(
        private dealerApiService: DealerapiService,
        private domSanitizer: DomSanitizer,
        private formBuilder: FormBuilder,
        private route: ActivatedRoute
    ) {}
    forms: any;
    profileForm: FormGroup;
    imageurl: any;
    username: any;
    user: any;
    ngOnInit() {
        this.route.params.subscribe(params => {
            // get the username out of the route params
            this.username = params["username"];

            const username = params["username"];
            this.dealerApiService
                .getUserbyUsernameProfile(username)
                .subscribe((user: any) => {
                    this.user = user.data;
                    console.log(user);
                });
        });

    }

}

Answer 1

像下面这样尝试，

export class HomeProfileComponent implements OnInit {
  ...
  ...
  user: any; // comment this line
  user = <User>{}; // Add this line

  ...
  ...
}

// Add the below model after your component class
export class User {
  firstName: string;
  lastName: string;
  // remaining properties
}

现在在您的 html 中，您可以访问用户属性而无需 ? （安全操作员）

{{user.firstName}}

Answer 2

您应该在组件文件本身中分配用户的名字值。试试这个：

firstName: string;
// other variables

// ..other code..

this.dealerApiService
  .getUserbyUsernameProfile(username)
     .subscribe((user: any) => {
        this.user = user.data;
        // added code
        this.firstname = user['data']['firstName'];
        console.log(user);
      });
   });

现在尝试从您的模板访问 firstName。

Answer 3

这正是我的问题....Metronic 主题没有将从 API 接收到的数据渲染到模板.. 它在发出事件后呈现接收到的数据。因此，您可以将点击功能绑定到任何已呈现的按钮..

Document.getElementById('alreadyRenderedBTN').click();

... 或者简单地更改 ChangeDetectionStrategy.OnPush
到 ChangeDetectionStrategy.Default

里面app.component.ts

数据未显示 Angular8（Metronic 主题）

Data isn't showing Angular8 (Metronic Theme)

metronic

angular

angular8