我是角度和角度材料的新手。我正在使用一個教程來做一個小專案，我有一個角度材質自動完成來過濾演員，當我點擊其中一個演員時，它應該顯示在帶有拖放功能的墊表中。因此，從選單中 - 首先單擊“創建電影”以查看演員自動完成功能（有一個墊表，已將所選演員添加到其中）。我沒有使用任何資料庫來實作角色自動完成功能，而是在代碼中使用了硬編碼的角色。但是在我選擇并單擊它后，自動完成中的演員不會添加到 mat-table 中。但是在瀏覽器控制臺中，我從自動完成中選擇了一個演員后添加了一行，但沒有錯誤 -
我在這里錯過了什么。stackblitz 中的完整 github 代碼可在下面的鏈接中找到。
我的整個專案在stackblitz 專案鏈接中可用
創建-movie.component.html
<h2>Create Movie</h2>
<h4>Select the Actors</h4>
<app-actors-autocomplete></app-actors-autocomplete>
創建-movie.component.ts
import { Component, OnInit } from '@angular/core';
import { multipleSelectorModel } from '../../utilities/multiple-selector/multiple-selector.model';
import { MoviesService } from '../movies.service';
import { movieCreationDTO } from '../movies.model';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-create-movie',
templateUrl: './create-movie.component.html',
styleUrls: ['./create-movie.component.css'],
})
export class CreateMovieComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
saveChanges(event: Event): void {}
}
演員-autocomplete.component.html
<form>
<mat-form-field>
<input
type="text"
placeholder="Select the actors"
matInput
[formControl]="control"
[matAutocomplete]="auto"
/>
</mat-form-field>
<mat-autocomplete #auto (optionSelected)="optionSelected($event)">
<mat-option *ngFor="let actor of actorsToDisplay" [value]="actor">
<img [src]="actor.picture" /> {{ actor.name }}
</mat-option>
</mat-autocomplete>
</form>
<table
*ngIf="selectedActors.length > 0"
mat-table
[dataSource]="selectedActors"
cdkDropList
[cdkDropListData]="selectedActors"
(cdkDropListDropped)="dropped($event)"
>
<ng-container matColumnDef="picture">
<td mat-cell *matCellDef="let element">
<img [src]="element.picture" style="width: 50px" />
</td>
</ng-container>
<ng-container matColumnDef="name">
<td mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>
<ng-container matColumnDef="character">
<td mat-cell *matCellDef="let element">
<mat-form-field appearance="outline" style="margin-top: 10px;">
<mat-label>Character</mat-label>
<input matInput [(ngModel)]="element.character" />
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<td mat-cell *matCellDef="let element">
<mat-icon mat-list-icon (click)="remove(element)">close</mat-icon>
</td>
</ng-container>
<tr
mat-row
*matRowDef="let row; columns: columnsToDisplay"
cdkDrag
[cdkDragData]="row"
></tr>
</table>
演員-autocomplete.component.ts
import { actorsMovieDTO } from './../actors.model';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { analyzeAndValidateNgModules } from '@angular/compiler';
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatTable } from '@angular/material/table';
import { ActorsService } from '../actors.service';
@Component({
selector: 'app-actors-autocomplete',
templateUrl: './actors-autocomplete.component.html',
styleUrls: ['./actors-autocomplete.component.css'],
})
export class ActorsAutocompleteComponent implements OnInit {
constructor(private actorService: ActorsService) {}
control: FormControl = new FormControl();
// @Input()
// selectedActors : []= [];
// actorsToDisplay:actorsMovieDTO[]=[];
actorsToDisplay = [
{
name: 'Tom Holland',
picture:
'https://moviesapis.blob.core.windows.net/actors/bb1533c8-fe83-4145-8f8f-d1535afbe01e.jpg',
character: '',
},
{
name: 'Chris Hemsworth',
picture:
'https://moviesapis.blob.core.windows.net/actors/f39dd82f-5b41-4d54-887b-8430500bb0e5.jpg',
character: '',
},
{
name: 'Samuel L Jackson',
picture:
'https://moviesapis.blob.core.windows.net/actors/1d99e4df-dfa5-4dde-9b4b-2d197f5fb116.jpg',
character: '',
},
{
name: 'Chris Evans',
picture:
'https://moviesapis.blob.core.windows.net/actors/346b6791-6b61-42b7-8a57-da136463217e.jpg',
character: '',
},
];
selectedActors: any[]=[];
originalActors = this.actorsToDisplay;
columnsToDisplay!: ['picture', 'name', 'character', 'actions'];
@ViewChild(MatTable) table: MatTable<any>;
ngOnInit(): void {
this.control.valueChanges.subscribe((value) => {
this.actorsToDisplay = this.originalActors;
this.actorsToDisplay = this.actorsToDisplay.filter(
(actor) => actor.name.indexOf(value) !== -1
);
});
}
optionSelected(event: MatAutocompleteSelectedEvent) {
console.log(event.option.value);
this.selectedActors.push(event.option.value);
this.control.patchValue('');
// this.control.patchValue('');
if (this.table !== undefined) {
this.table.renderRows();
}
}
remove(actor) {
const index = this.selectedActors.findIndex((a) => a.name === actor.name);
this.selectedActors.splice(index, 1);
this.table.renderRows();
}
dropped(event: CdkDragDrop<any[]>) {
const previousIndex = this.selectedActors.findIndex(
(actor) => actor === event.item.data
);
moveItemInArray(this.selectedActors, previousIndex, event.currentIndex);
this.table.renderRows();
}
}
演員-autocomplete.component.css
form{
width:100%;
max-width: 500px;
}
mat-form-field{
width: 100%;
}
img{
vertical-align: middle;
margin-right: 8px;
width: 35px;
height: 45px;
}
table{
width: 100%;
margin-bottom: 1rem;
}
mat-icon{
cursor: pointer;
}
uj5u.com熱心網友回復：
問題在于以下屬性宣告actors-autocomplete.component.ts：
columnsToDisplay!: ['picture', 'name', 'character', 'actions'];
它應該初始化=為：
columnsToDisplay = ['picture', 'name', 'character', 'actions'];
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/402120.html
上一篇：我的應用程式的RouterModule不是懶加載帖子
下一篇：型別'Promise<Hotel[]>'缺少型別'Hotel[]'中的以下屬性：length、pop、push、concat和其他26個