Ng-reflect-value不为空，但输入显示我的占位符，而不是输入的值角度材质

如何解决Ng-reflect-value不为空，但输入显示我的占位符，而不是输入的值角度材质

My form with data below

Input example with ng-reflect-value data not empty but not shown in my form...

尽管ng-reflect-value不为空，但我的值未显示在表单中，我不知道为什么它不起作用。 我在其他组件中使用了相同的过程，并且在那里起作用，但是在这里不起作用，我也不明白为什么。你能帮我吗？

组件

import { Component,OnInit,Inject } from "@angular/core";
import { BreakpointObserver,Breakpoints } from "@angular/cdk/layout";
import { Observable } from "rxjs";
import { map,shareReplay } from "rxjs/operators";
import { AuthService } from "../_services/auth.service";
import { AlertifyService } from "../_services/alertify.service";
import { Router } from "@angular/router";
import { Userforlogin } from "../_models/userforlogin";
import { JwtHelperService } from "@auth0/angular-jwt";
import { environment } from "src/environments/environment";
import { UserService } from "../_services/user.service";
import { MatDialogConfig,MatDialog,MatDialogRef,MAT_DIALOG_DATA } from '@angular/material/dialog';
import { User } from '../_models/user';
import { FormGroup,FormBuilder,Validators } from '@angular/forms';

@Component({
  selector: "app-main-nav",templateUrl: "./main-nav.component.html",styleUrls: ["./main-nav.component.css"],})
export class MainNavComponent {
  isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(
      map((result) => result.matches),shareReplay()
    );

  jwtHelper = new JwtHelperService();
  baseTitle = environment.title;
  userfl: Userforlogin;

  constructor(
    private breakpointObserver: BreakpointObserver,public authService: AuthService,private alertify: AlertifyService,private router: Router,public dialog: MatDialog,) {}

  ngOnInit() {
    this.authService.currentUserTest1.subscribe(
      (userRD) => (this.userfl = userRD)
    );
    const token = localStorage.getItem("token");
    const user: Userforlogin = JSON.parse(localStorage.getItem("user"));
    if (token) {
      this.authService.decodedToken = this.jwtHelper.decodeToken(token);
    }
    if (user) {
      this.userfl = user;
    }
  }

  loggedIn() {
    return this.authService.loggedIn();
  }

  logout() {
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    this.authService.decodedToken = null;
    this.authService.currentUser = null;
    this.alertify.message("Déconnecté");
    this.router.navigate(["/login"]);
  }

  openUserManagementDialog(user: Userforlogin) {
    const dialogConfig = new MatDialogConfig();    

    dialogConfig.width=  '500px';
    dialogConfig.data = {
      user : user       
    };

    const dialogRef = this.dialog.open(DialogUserManagementComponent,dialogConfig);

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        
      }
    });
  }
}



@Component({
  selector: "dialog-user-management",templateUrl: "dialog-user-management.html",})
export class DialogUserManagementComponent {
  formGroup: FormGroup; 
  post: any = "";
  userfl: Userforlogin;
  userID: number;

  constructor(
    private userService: UserService,private formBuilder: FormBuilder,private dialogRef: MatDialogRef<DialogUserManagementComponent>,@Inject(MAT_DIALOG_DATA) public data: any){
    this.userfl = data.user;
  }

  ngOnInit(): void {  
    this.createForm();
    
  }

  createForm() {
    this.formGroup = this.formBuilder.group({
      firstname: [null,[Validators.required]],lastname: [null,login: [null,email: [null,validate: "",});
  }

  onSubmit(post: any){

  }
 


}

查看

<h2 mat-dialog-title>Modifier mon compte</h2>
<mat-dialog-content class="mat-typography">  
  <div>    
        <form
          [formGroup]="formGroup"
          (ngSubmit)="onSubmit(formGroup.value)"          
          class="form"
        >
          <mat-form-field class="form-element">
            <input
              matInput
              placeholder="Prénom"
              formControlName="firstname"
              value="{{ userfl?.firstname }}"
            />
            <mat-error
              *ngIf="
                !formGroup.controls['firstname'].valid &&
                formGroup.controls['firstname'].touched
              "
              >Le prénom est requis
            </mat-error>
          </mat-form-field> 
          <mat-form-field class="form-element">
            <input
              matInput
              placeholder="Nom"
              formControlName="lastname"
              value="{{ userfl?.lastname }}"
            />
            <mat-error
              *ngIf="
                !formGroup.controls['lastname'].valid &&
                formGroup.controls['lastname'].touched
              "
              >Le nom est requis
            </mat-error>
          </mat-form-field>     
          <mat-form-field class="form-element">
            <input
              matInput
              placeholder="Login"
              formControlName="login"
              value="{{ userfl?.login }}"
            />
            <mat-error
              *ngIf="
                !formGroup.controls['login'].valid &&
                formGroup.controls['login'].touched
              "
              >Le login est requis
            </mat-error>
          </mat-form-field>     
          <mat-form-field class="form-element">
            <input
              matInput
              placeholder="Email"
              formControlName="email"
              value="{{ userfl?.email }}"
            />
            <mat-error
              *ngIf="
                !formGroup.controls['email'].valid &&
                formGroup.controls['email'].touched
              "
              >L'email est requis
            </mat-error>
          </mat-form-field>         
        </form>    
        
        <div>
            {{ userfl | json }}
        </div>
         
  </div>
 
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Annuler</button>
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial mat-raised-button color="primary">
        <mat-icon>check</mat-icon> Sauver
    </button>
</mat-dialog-actions>

非常感谢您的帮助和建议！ ：-）