数据没有显示Angular8 (Metronic主题)

Question

当im在我的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

这正是我的问题..。Metronic主题不是将接收到的数据从API呈现到模板。它在发出事件后呈现接收到的数据。因此，您可以将click函数绑定到任何已呈现的按钮。

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

..。或者简单地更改ChangeDetectionStrategy.OnPush

转到ChangeDetectionStrategy.Default

内部app.component.ts

Answer 2

试试下面的样子，

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 3

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

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。