Hide/Show 次点击建议

Question

我做了一个邮件检查建议邮箱输入框，如果用户输入邮箱：- ss@gnail.com，它会给出建议ss@ gmail.com 同理

现在，我面临的问题是，如果用户收到任何建议，那么用户应该能够点击建议的电子邮件，然后在点击时隐藏建议。

我使用了show hide方法，但是在我使用的隐藏show方法后第二次没有显示建议。 .

如果你在图片中看到，它会收到建议，一旦我点击建议，它就会被更正，但如果用户写错了电子邮件，它不会显示任何建议。下面是我的 stackblitz 的代码。

Answer 1

只需将 this.hideSuggestion = false; 放在 suggestEmail(email) 事件之上。

suggestEmail(email) {
    this.hideSuggestion = false; <!-- Added this line -->
    Mailcheck.run({
      email: email,
      domains: ['gmail.com', 'aol.com', 'hotmail.com', 'yahoo.com', 'rediffmail.com', 'edu', 'msn.com',], 
      secondLevelDomains: ['domain', 'hotmail'], 
      topLevelDomains: ["com", "net", "org", "info"],
      suggested: (suggestion) => {

        if (suggestion) {

          this.suggestion = suggestion
          this.suggestedEmail = this.suggestion.full
        }
      },
      empty: function () {
      }
    });

  }

Stacklblitz DEMO

Answer 2

为什么第二次没有显示？因为你永远不会把 hideSuggestion 变成 false。解决方案将完全依赖于实现，其中之一可能根本不使用 hideSuggestion，而是将 suggestion 设置为 null 一旦它被设置为 input

<div *ngIf="suggestion" (click)="clickSuggestion()">{{suggestedEmail}}</div>

  clickSuggestion() {
    this.signupForm.get('userData.email').setValue(this.suggestedEmail);
    this.emailSuggestion = this.signupForm.get('userData.email').value;
    if (this.emailSuggestion === this.suggestedEmail) {
      this.suggestion = null;
    }
  }

https://stackblitz.com/edit/angular-email-checker-zqnmtp?file=app%2Fapp.component.ts

Hide/Show 次点击建议

Hide/Show suggestions on click

angular

angular-reactive-forms