Question

我在html模板中有这个多选：

找到-form.component.html

<div class="row has-error-text">
    <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 offset-xl-4 input-group btn-group" style="height:64px;">
        <div style="position: relative; display: inline-block; width: 100%;">
            <multiselect #multiselect></multiselect>
        </div>
    </div>
</div>
<div class="row error-text" [style.visibility]="multiselect.selectedCategories.length < 1 && submitted ? 'visible' : 'hidden'">
    <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 offset-xl-4">
        <small class="text-danger">Please select at least 1 category.</small>
    </div>
</div>

我可以改变这个：

<div class="row error-text" [style.visibility]="multiselect.selectedCategories.length < 1 && submitted ? 'visible' : 'hidden'">

进入这个：

<div class="row error-text" [style.visibility]="multiselect.getVisibility()">

然后在find-form.component.ts中使用此函数：

  getVisibility() {
    if (this.multiselect.selectedCategories.length < 1 && this.submitted) {
      return 'visible'
    } else {
      return 'hidden'
    }
  }

它可以更加单元测试，也更容易调试和理解。

这导致我得到错误：

＆＃34;多选未定义＆＃34;

事情是我的find-form.component.ts没有this.multiselect。但是在它的模板中它有<multiselect #multiselect></multiselect>所以这意味着它实际上有这个.multiselect？或者如果没有，我如何将多重选择的实例传递给它？

如何将style.visibility放入我试图做的功能中，而不会将＆＃34; multiselect定义为＆＃34;错误？

Answer 1

我认为你应该能够做到这一点：

TS：

getVisibility(multiselect) {
    if (multiselect.selectedCategories.length < 1 && this.submitted) return 'visible'
    else return 'hidden'
}

HTML：

<div class="row error-text" [style.visibility]="getVisibility(multiselect)">

Answer 2

你还能做什么，

<div class="row error-text" [hidden]="getVisibility()">

getVisibility() {
    if (this.multiselect.selectedCategories.length < 1 && this.submitted) {
      return false;
    } else {
      return true;
    }
  }

Answer 3

@ViewChild是正确的方法，但是您使用getVisibility调用multiselect.getVisibility()函数这是不正确的，因为getVisibility函数在组件中，您必须直接使用它更改您的HTML如下：

<div class="row error-text" [style.visibility]="getVisibility()">

重构[style.visibility] =＆＃34;＆＃34;逻辑转化为功能

3 个答案: