私はアンギュラ4にちょっと新しく、マテリアルライブラリ（これは昨日インストールされた文字通り）に新しくなっています。FormArrayのオートコンプリートフィルター - Angular4の材料
動的に追加/削除された入力フィールドのリストを作成しようとしています。アイデアは、管理者にデータベースから削除するユーザーのリストを作成させ、削除するユーザーのアレイで一度サービスにヒットすることです。
サービスから情報を取り込むユーザーの配列があります。私はフォームグループを作成しました。そのformGroupには、新しいFormControl要素を含むFormArrayがあります。ユーザーは、ボタンをクリックすることで、この配列内の項目を追加および削除できます。これにより、画面に入力フィールドが作成されます。オートコンプリートボックスを表示してリストからユーザーを選択し、管理者が入力フィールドに入力を開始するときにリストをフィルタリングしたいと考えています。フィルターは、ユーザーオブジェクトの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ファイルです：私はこれがあること項目に関係していると思います
<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>
：ここ
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テンプレートですユーザーの配列と観測可能である必要がありますが、私はそれについて正確に何をするべきか肯定的ではありません。私はまた、私のフィルタがホーゼルされている肯定的ですが、私は一度コードを稼働させたら、その調整を扱うつもりでした。
私は少し角度がありますので、説明を徹底させていただければ大いに感謝します。何が起こっているのか、なぜ起こっているのか、私のコードでは左回りにしてより良い開発者になれるのかを本当に把握したい。ありがとうございました！