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

Question

我对 angular 4 有点陌生，对材料库（字面意思是昨天安装的）超级陌生。

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

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

RemoveUserComponent.html:11 ERROR 错误: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' 用于管道'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>

我认为这与作为用户数组的项目有关，并且它们需要是可观察的，但我不确定该怎么做。我也很肯定我的过滤器已经过水管，但是一旦我的代码工作了，我就会处理它的调整。

我对 Angular 有点陌生，所以如果您不介意详细解释，我将不胜感激。我真的很想了解正在发生的事情，为什么会发生，以及我在代码中左转的地方，这样我就可以成为一个更好的开发人员。谢谢各位！

Answer 1

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

原来是

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

应该是

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

代码仍然有问题，但过滤器现在是这样工作的——正如我之前所怀疑的那样。感谢您停下来看看。