javascript - 使用角度在对象中更新/添加对象

Question

如何将数据添加到名为 Facture 的类中，该类具有字符串和数字等简单属性以及另一个属性，该属性是另一个类 UserInfo 的对象。有人可以给我一个想法，让它按照我在 Angular 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 Bad Request 这是图像

链接堆栈闪电战：

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

标签： javascriptangulartypescriptangular-cli