所以我有這個任務，我必須<mat-select>動態創建多個s，這取決于從后端回傳的“標簽型別”的數量。此外，<mat-select>s 填充有資料（標簽）。用戶可以創建一個新的“標簽型別”，這意味著<mat-select>需要創建一個新的。該<mat-select>S還具有一個過濾器。現在這是我卡住的地方<mat-option>，當過濾器過濾掉所有選項時，我需要顯示用于創建新標簽（否則隱藏）的默認值。似乎沒有任何作業，我試圖把(change)="onFilterChange()"對<mat-select>標簽，并試圖檢查的長度<mat-select>選項（從訪問它@ViewChild('select')），如果它是一個布爾切換到真正的，以顯示創建標簽的默認選項。然而這并沒有奏效。還，(selectionChange)根本沒有幫助我，因為過濾選項時不會觸發。非常感謝任何幫助或見解。這是代碼：
<div class="col-md-6">
<form *ngIf="preferencesFormGroup" [formGroup]="preferencesFormGroup">
<mat-form-field *ngFor="let tagType of tagTypes$ | async">
<mat-select placeholder="{{tagType.name}}" multiple #select [formControlName]="tagType.name">
<mat-select-trigger>
<mat-chip-list>
<mat-chip *ngFor="let tag of preferencesFormGroup.controls[tagType.name].value" [removable]="true"
(removed)="onTagsRemoved(tagType.name, tag)">
{{ tag }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</mat-select-trigger>
<div class="search-wrapper">
<input matInput placeholder="Search tags" [formControlName]="tagType.name 'Search'" type="text"
id="searchInput">
<a mat-icon-button id="resetButton" (click)="clearFilter(tagType.name)">
<mat-icon aria-label="Icon-button for clearing the input" id="clearIcon" [inline]="true">clear</mat-icon>
</a>
</div>
<hr id="hrSearch">
<mat-option
*ngFor="let tag of tagType.tags | contains : preferencesFormGroup.controls[tagType.name 'Search'].value"
[value]="tag.name">{{tag.name}}</mat-option>
<mat-option *ngIf="noMoreOptions" (click)="createNewTag(tagType.name)"><i>Didn't find the tag you want? Click here to create your own.</i></mat-option>
</mat-select>
</mat-form-field>
</form>
<div class="row" style="align-items: center;">
<div class="col-md-6">
<div class="row" *ngIf="addDropDownActive" style="align-items: center;">
<div class="col-md-8">
<mat-form-field>
<input matInput placeholder="Add new preference" type="text" [(ngModel)]="newPreference">
</mat-form-field>
</div>
<div class="col-md-4">
<button mat-button mat-stroked-button color="accent" (click)="createDropdown()"
[disabled]="(newPreference === null) || (newPreference === '')">Save</button>
</div>
</div>
</div>
<div class="col-md-6">
<button mat-button (click)="switchVisible()" color="accent" class="float-right">{{preferenceBtn}}</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6">
<button mat-button mat-stroked-button class="float-left" color="accent"
(click)="goToPreviousStep()">Back</button>
</div>
<div class="col-md-6">
<button mat-button mat-raised-button class="float-right" color="accent" (click)="goToNextStep()">Next</button>
</div>
</div>
</div>
和 .ts 檔案：
@Component({
selector: 'tours-tour-tag',
templateUrl: './tour-tag.component.html',
styleUrls: ['./tour-tag.component.css']
})
export class TourTagComponent implements OnInit {
tagTypes$: Observable<TagType[]>;
preferencesFormGroup: FormGroup;
addDropDownActive = false;
newPreference: string = null;
preferenceBtn = 'Create new preference';
filterPropertySearch = '';
noMoreOptions = false;
@ViewChild('select') matSelect: MatSelect;
constructor(private store: Store) { }
ngOnInit(): void {
this.tagTypes$ = this.store.select(TagTypeSelectors.selectAllTagTypes);
this.tagTypes$.subscribe((tagTypes) => { this.initForm(tagTypes) });
}
onTagsRemoved(tagTypeName: string, tag: string) {
const tags = this.preferencesFormGroup.controls[tagTypeName].value as string[];
this.removeFirst(tags, tag);
this.preferencesFormGroup.controls[tagTypeName].setValue(tags);
}
private removeFirst<T>(array: T[], toRemove: T): void {
const index = array.indexOf(toRemove);
if (index !== -1) {
array.splice(index, 1);
}
}
switchVisible() {
this.addDropDownActive = !this.addDropDownActive;
if (this.addDropDownActive) {
this.preferenceBtn = 'Close';
} else {
this.preferenceBtn = 'Create new preference';
}
this.newPreference = null;
}
initForm(tagTypes: TagType[]) {
this.preferencesFormGroup = new FormGroup({});
tagTypes.forEach((tagType: TagType) => {
this.preferencesFormGroup.addControl(tagType.name, new FormControl([]));
const searchFormControl = new FormControl([]);
searchFormControl.setValue('');
this.preferencesFormGroup.addControl(tagType.name 'Search', searchFormControl);
});
console.log(this.preferencesFormGroup);
}
createDropdown() {
const newTagType: TagType = { id: null, code: null, name: this.newPreference, tags: null };
this.store.dispatch(TagTypeActions.createTagType({ tagType: newTagType }));
this.switchVisible();
}
clearFilter(tagTypeName: string): void {
const searchControlName = tagTypeName.concat('Search');
this.preferencesFormGroup.controls[searchControlName].setValue('');
}
createNewTag(tagTypeName: string) {
console.log('open modal component');
}
}
uj5u.com熱心網友回復：
問題是變數“noMoreOption”——你真的需要一個布爾陣列，而不僅僅是一個簡單的變數——。但比創建一個陣列更好，讓 Angular 為你作業。
你可以把它用* ngIf一個變數存盤的方式<ng-container *ngIf="what-ever as items">
所以，你可以使用一些像 (*)
<ng-container *ngIf="tagType.tags | contains :
preferencesFormGroup.controls[tagType.name 'Search'].value
as items">
<mat-option *ngFor="let tag of items"
[value]="tag.name">{{tag.name}}
</mat-option>
<mat-option *ngIf="items.length==0"
(click)="createNewTag(tagType.name)">
<i>Didn't find the tag you want? Click here to create your own.</i>
</mat-option>
<ng-container>
(*)我想你的管道contains如果不匹配則回傳一個空陣列，而不是一個空陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360621.html
上一篇：Angular：如何與app-component(app-root)共享來自自定義組件的資料
下一篇：正則運算式判斷key