Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 如何获取用户的身份证_Angular_Typescript - Fatal编程技术网

Angular 如何获取用户的身份证

Angular 如何获取用户的身份证,angular,typescript,Angular,Typescript,我在我的项目中遇到了一个问题,我正试图在我的项目中添加一个账单。我有一个账单表格要填写,所以输入“名称”时,我在DB中搜索了用户名,我选择了其中一个,所以我不知道如何获取我选择的用户的id。有人能帮我解决这个问题吗?请通过我使用angular 10的方式,这是我的第一个项目,或者只是更新我的问题 添加制作组件 export class AddFacture1Component implements OnInit { @ViewChild('sample') p

我在我的项目中遇到了一个问题,我正试图在我的项目中添加一个账单。我有一个账单表格要填写,所以输入“名称”时,我在DB中搜索了用户名,我选择了其中一个,所以我不知道如何获取我选择的用户的id。有人能帮我解决这个问题吗?请通过我使用angular 10的方式,这是我的第一个项目,或者只是更新我的问题

添加制作组件

 export class AddFacture1Component implements OnInit {
    
      @ViewChild('sample')
      public AutoCompleteObj: AutoCompleteComponent;
    
     
      isSuccessful = false;
      errorMessage = '';
      userList: UserInfo[] = [];
      status: Status[] = [
        {value: 'unpaid', viewValue: 'Unpaid'},
        {value: 'paid', viewValue: 'Paid'}
      ];
    
     
    
     form: FactureInfo = {};
      constructor(private factureService: FactureService, private userService : UserService) { }
    
      ngOnInit(): void {
        this.getUsersData();
      }
     onSubmit() {
     
          this.factureService.addFacture(this.form).subscribe(
            data => {
              console.log(data);
              this.isSuccessful = true;
             
            },
            err => {
              this.errorMessage = err.error.message;
            }
          );
    
        }
    
      
        getUsersData() {
          this.userService.getPublicContent().subscribe(
            data =>  {
    
              this.userList = data;
              
             console.log(data);
            },
            err => {
              console.log("An error has occured !")
            }
          );
        }
        
        public fields: Object = { value: 'nom' };
        public value: string = '';
        public fields1: Object = { value: 'prenom' };
        public value1: string = '';
        // set the placeholder to AutoComplete input
        public waterMark: string = 'e.g. Last name';
        public waterMark1: string = 'e.g. First name';
        // set the height of the popup element
        public height: string = '250px';
        // 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 = '';
            }
        }
    
    }
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  #sample [dataSource]='userList' [(value)]='value'
                        [placeholder]='waterMark' [fields]='fields' (change)='onChange($event)'
                        name="nom" [(ngModel)]="form.nom" required #nom="ngModel"></ejs-autocomplete>
             
          </div>
          <div class="form-group position-relative my-4">
                  <ejs-autocomplete id='games' #sample [dataSource]='userList' [(value)]='value1'
                      [placeholder]='waterMark1' [fields]='fields1' (change)='onChange($event)'
                      name="prenom" [(ngModel)]="form.prenom" required #prenom="ngModel"></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-medicine']">Return to the store</button>
          </div>
          </div> 
      </div>
    </div>
  </div>

增加一项新法案
比尔
价格
添加到存储
账单已正确添加!
返回商店

首先不要为
ejs自动完成
绑定
属性。 然后只需设置正确的
字段
值即可设置正确的映射。 你的情况可能是这样的

interface User {
  id: number;
  name: string;
}

...
fields = { value: 'id' };