在双重条件下删除ngIf项

Question

我想调用具有双重条件的方法onRemoveLastTag()。我只想在表单为空且为keyup.backspace时调用该方法。

当输入字段中仍有文本时，Backspace应正常工作。这是一个Angular 11应用程序。

<form [formGroup]="searchForm">
<label for="search"></label>
<span class="chippie"
*ngFor="let tag of selectedTags; let i=index">
{{tag}}
<a class="close"
(click)="onRemoveTag(i)"
> X</a></span>
<input
id="search"
formControlName="search"
type="text"
placeholder="Your tag goes here"
class="form-control"
autocomplete="off"
(keyup.enter)="addTag($event)"
(keyup.backspace)="onRemoveLastTag()"
(keyup)="openDropdown()"
(keyup.arrowLeft)="toggleDropdown()"
>
</form>

onRemoveLastTag() {
this.selectedTags.pop();
console.log(this.selectedTags)
}

Answer 1

这里的问题是我试图在HTML中构建逻辑。我认为最好的做法是保持TypeScript中的逻辑。这是我用来处理逻辑的方法。

onBackspace() {
if (!this.getSearchValue()) {
if (!this.isSelectingAndRemovingTags) {
this.isSelectingAndRemovingTags = true;
return;
}
if (this.toBeRemovedTagIndex < 0) {
this.toBeRemovedTagIndex = this.selectedTags.length - 1;
return;
}
this.onRemoveTag(this.toBeRemovedTagIndex);
this.toBeRemovedTagIndex = this.selectedTags.length - 1;
}
}