如何使用 Angular 在每次点击高级搜索时重置模式答案

【问题标题】：How to reset the modal on every click of advance search using Angular如何使用 Angular 在每次点击高级搜索时重置模式
【发布时间】：2020-01-07 02:10:03
【问题描述】：

如果字段中没有值，我已禁用搜索按钮，因为那里没有必填字段。现在每次点击高级搜索，我都能看到我输入并点击搜索的值，所以现在我必须清除预先搜索的值或者应该重置高级搜索模型，但是输入的值下面的高级搜索链接应该保留。我被困在这里，无法继续前进。

打字稿：

disableSubmit(): boolean {

    let disabled = true;
    const keys = Object.keys(this.advanceSearch);
    keys.forEach(key => {

        if (this.advanceSearch[key]) {

          disabled = false;
          return;
        }
    });
    return disabled;
  }

我还贴了工作演示的链接：DEMO

【问题讨论】：

标签： angular

【解决方案1】：

所以起初不可能从Array.forEach(...) 内部返回（参见docs）。

第二次直接在 HTML 中调用函数会导致执行很多次，因为每次 Angular 执行更改检测时都会执行该函数。

所以我希望我能正确理解你的问题。您可以将输入的输入存储在单独的数组中，以便在 HTML 中访问它：

app.component.ts

...
list = [];
...    

getAdvanceSearchList() {
    console.log("submit...");
    const keys = Object.keys(this.advanceSearch);
    keys.forEach(key => {
        if (this.advanceSearch[key]) {
            const obj = {key: key, value: this.advanceSearch[key]};
            this.list.push(obj);
        }
    });
    // Reset your advanceSearch model here
}

app.component.html

<button type="button" class="btn btn-outline-secondary btn-sm rounded-pill mr-1" [hidden]="!item.value" 
        *ngFor="let item of list"> <!-- Use the list here and you don't need the keyvalue pipe -->
            {{item.value}}
            <i class="fas fa-times-circle" (click)="remove(item.key)"></i>
</button>

【讨论】：

您好，感谢您的回复，但很抱歉它不起作用
重置模型不起作用，我这里使用了模型，所以我需要重置模型吗？
是的，您需要重置模型。抱歉，我认为我的评论是可以理解的。
是的，这是可以理解的，但我正在努力让它解决，给我一些时间我回来
我已经从一个组件中获取了这个高级搜索模式部分，显示在高级搜索下方的值是父组件，一个模型我同时使用两个，所以我无法删除或重置模态的，这是我面临的问题