Question

我对棱角4有点新，对材料库来说是新手（昨天已经安装好了）。

我正在尝试创建动态添加/删除的输入字段列表。我的想法是让我的管理员创建一个要从数据库中删除的用户列表，并使用要删除的用户数组点击服务一次。

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

RemoveUserComponent.html：11错误错误：InvalidPipeArgument：管道'AsyncPipe'的'[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]' / p>

这是我的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>

我认为这与作为一组用户的项目有关，它们需要是一个可观察的，但我不肯定该如何处理它。我也很肯定我的过滤器已被清除，但是一旦我让代码工作，我就会处理那些调整。

我对角度有点新意，所以如果你不介意在解释中做到彻底，我会非常感激。我真的想要了解正在发生的事情，为什么会发生这种情况，以及我在我的代码中左转，以便我可以成为更好的开发人员。谢谢大家！

Answer 1

发现代码问题。它实际上位于标签下面。

原来是

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

应该是

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

代码仍然破裂，但现在过滤器的工作原理 - 正如我之前所怀疑的那样。谢谢，如果你停下来看看。

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

1 个答案: