FormArray上的自动完成过滤器-Angular4材质

我对角4和超新材质库（字面上昨天安装的）有点新。FormArray上的自动完成过滤器-Angular4材质

我想创建一个动态添加/删除输入字段的列表。这个想法是让我的管理员创建一个从数据库中删除的用户列表，并用一组用户删除一次命中该服务。

我有一组用户从服务中获取填充。我创建了一个表单组。在formGroup中，我有一个FormArray，它包含可能的新FormControl元素。用户可以通过单击按钮来添加和删除此数组中的项目。这将在屏幕上创建输入字段。我想要一个自动完成框显示从列表中选择一个用户，并且我想要在管理员开始在输入字段中输入时开始过滤列表。过滤器需要应用于从我的用户对象的lastName和firstName字段创建的字符串。我的执行中出现以下错误。

RemoveUserComponent.html:11 ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'

这里是我的RemoveUser.component.ts文件：

export class RemoveUserComponent implements OnInit{ 

     users:User[]; 
     filteredOptions: Observable<User>; 

     userForm = new FormGroup({ 
      usersToDelete : new FormArray([new FormControl()]), 
     }); 

     get usersToDelete() : FormArray{return this.userForm.get('usersToDelete') as FormArray} 

     constructor(private adminService:AdminService){} 

     ngOnInit(){ 
      this.filteredOptions = this.usersToDelete.valueChanges 
       .startWith(null) 
       .map(user => user && typeof User === 'object' ? user.lastName : user) 
       .map(name => name ? this.filter(name) : this.users.slice()); 

      this.adminService.getUsersByType() 
       .subscribe((data:User[])=>{ 
        this.users = data; 
        console.log("your user array"); 
        console.log(this.users); 
       }); 
     } 

     addUser(){ 
      this.usersToDelete.push(new FormControl()); 
     } 

     onDelete(i:number){ 
      this.usersToDelete.removeAt(i); 
     } 

     displayFn(user:User){ 
      return user ? user.lastName + ", " + user.firstName: user; 
     } 

     filter(name: string): User[] { 
      return this.users.filter(option => new RegExp(`^${name}`, 'gi').test(user)); 
     } 
     }

这里是我使用的HTML模板：

<form [formGroup]="userForm" (ngSubmit)="deleteUsers()" *ngIf="users"> 
        <div formArrayName="usersToDelete"> 
         <div *ngFor="let user of usersToDelete.controls;let i = index"> 
          <span class="inputDeleteUserRow"> 
           <md-input-container> 
             <input type="text" [mdAutocomplete]="auto" mdInput [formControlName]="i"> 
           </md-input-container> 

           <button class="btn btn-danger" type="button" (click)="onDelete(i)">-</button> 

           <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn"> 
            <md-option *ngFor="let user of users | async" [value]="user"> 
             {{ user.lastName }} , {{user.firstName}} 
            </md-option> 
           </md-autocomplete> 
          </span> 
         </div> 
        </div> 

        <button class="btn btn-success" (click)="addUser()">+</button> 
</form>

我觉得这与项目正在做一组用户，他们需要是可观察的，但我不确定如何处理它。我也是积极的，我的过滤器被洗掉了，但是当我得到代码工作时，我会处理这些调整。

我是一个有点新的角，所以如果你不介意在解释彻底，我将不胜感激。我很想知道发生了什么，为什么会发生，以及我在代码中左转的位置，以便我可以成为更好的开发人员。谢谢你们！

来源

2017-04-16 Tom L' esperance

发现问题的代码。它实际上在标签下。

原来是

<md-option *ngFor="let user of users| async" [value]="user">

应该已经

<md-option *ngFor="let user of filteredOptions | async" [value]="user">

代码仍然是打破了，但它的过滤器是如何工作的，现在 - 正如我先前怀疑。谢谢，如果你停下来看看。

来源

2017-04-16 03:25:13

FormArray上的自动完成过滤器-Angular4材质

回答

相关问题