在点击时隐藏/显示建议

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; } }

@Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.activity_fullscreen_dialog, container, false);
        ImageButton close = view.findViewById(R.id.fullscreen_dialog_close);
        TextView action = view.findViewById(R.id.fullscreen_dialog_action);

        titleEdit = view.findViewById(R.id.fullscreen_dialog_title);
        infoEdit = view.findViewById(R.id.fullscreen_dialog_info);
        fullEdit = view.findViewById(R.id.fullscreen_dialog_full);


        close.setOnClickListener(this);
        action.setOnClickListener(this);

        return view;
    }

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