使用角度更新/添加对象中的对象

如何解决使用角度更新/添加对象中的对象

如何将数据添加到名为Facture的类中，该类具有简单的属性（例如字符串和数字），另一个属性是另一个UserUser类的对象。有人可以给我一个想法，让它以我的第10个角度项目的方式实现

FactureData.ts

export class FactureInfo {

    id_facture?: string;
    num_facture?: number;
    prix?: number;
    date_facture?: Date;
    status?: string;
    utilisateur?: UserInfo;

}

AddFacture1Component.ts

 export class AddFacture1Component implements OnInit {
    
      @ViewChild('sample')
  public AutoCompleteObj: AutoCompleteComponent;

  
  public fields2: Object = { value: 'email' };
    public value2: string = '';
    // set the placeholder to AutoComplete input
    public waterMark2: string = 'e.g. Email';
    // set the height of the popup element
    public height: string = '250px';
  isSuccessful = false;
  errorMessage = '';
  userList: UserInfo[] = [];
  utilisateur: UserInfo;
  status: Status[] = [
    {value: 'unpaid',viewValue: 'Unpaid'},{value: 'paid',viewValue: 'Paid'}
  ];
  form: FactureInfo = { utilisateur : {}};
 
  constructor(private factureService: FactureService,private userService : UserService) { }

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

 onSubmit() {
 
      this.factureService.addFacture(this.form).subscribe(
        data => {
        
          this.isSuccessful = true;
          this.getUserByEmail();
         console.log(data);
        },err => {
          this.errorMessage = err.error.message;
        }
      );

    }

  
    getUsersData() {
      this.userService.getPublicContent().subscribe(
        data =>  {

          this.userList = data;
          
         
        },err => {
          console.log(err);
        }
      );
    }
  
    // bind the change event
    public onChange(args: any): void {
        
        let valueEle: HTMLInputElement = document.getElementsByClassName('e-input')[0] as HTMLInputElement;
        // make empty the input value when typed characters is 'null' in input element
        if (this.AutoCompleteObj.value === "null" || this.AutoCompleteObj.value === null || this.AutoCompleteObj.value === "") {
            valueEle.value = '';
        }
    }
    getUserByEmail() {
      
      this.userService.getUserByEmail(this.value2).subscribe(
        data=> {
          this.utilisateur = data;
        console.log(data)
        },err => {
          console.log(err);
        }
      );
      
    }
    
  }

AddFacture.html

   <div class="container p-5">
    <div class="row">
      <div class="col-md-6 m-auto">
        <h1 class="activities-title text-center mb-5">
          Add a new bill
        </h1>

        <form class="activites"
        form name="form" *ngIf="!isSuccessful"
        name="form"
        (ngSubmit)="f.form.valid && onSubmit()"
        #f="ngForm"
        novalidate>
          <div class="form-group position-relative my-4">
            <input type="text" class="input" required="required" name="num facture"  [(ngModel)]="form.num_facture"
            #num_facture="ngModel"/>
            <span class="highlight" ></span>
            <span class="bar"></span>
            <label>N bill</label>
          </div>
          <div class="form-group position-relative my-4">
            <input type="text" class="input" required="required" name="prix"  [(ngModel)]="form.prix"
            #prix="ngModel"/>
            <span class="highlight" ></span>
            <span class="bar"></span>
            <label>Price</label>
          </div>
          <div class="form-group position-relative my-4">
            <input type="date" class="input" required="required" name="date_facture"  [(ngModel)]="form.date_facture"
            #date_facture="ngModel"/>
            <span class="highlight" ></span>
            <span class="bar"></span>
            
          </div>

        
         <div class="form-group position-relative my-4">
          <ejs-autocomplete id='games' #sample [dataSource]='userList' [(value)]='value2' 
              [placeholder]='waterMark2' [fields]='fields2' (change)='onChange($event)' 
              ></ejs-autocomplete>
         </div>

          <div class="btn-box">
            <button class="btn btn-submit"  type="submit" name="submit-form">Add to store</button>
          </div>
        </form>
        <div class="alert alert-success" *ngIf="isSuccessful">
           The bill has been added correctly!
           <div class="btn-box">
            <button class="btn btn-submit"  name="submit-form" [routerLink]="['../list-facture']">Return to the store</button>
          </div>
          </div> 
      </div>
    </div>
  </div>

ScreenShot 400错误的要求 Here is the image

链接堆叠闪电战：

https://stackblitz.com/edit/angular-ivy-nyp1db?file=src/app/app.component.html