角5:如何为未显示的组件强制使用默认值

我们将Angular 5用于我们的Web App仪表板。我在为如何编写一段未显示模块时实质上接受默认值的代码而苦苦挣扎。

让我更好地解释。

  • 我们将Firebase用于无SQL数据库。我在Firebase中有一个设置,可以切换是否显示“区域”模块。
  • 如果在数据库中Area json属性设置为“ Show”,则* ngIf代码将转换为True,并且第一个代码块被处理。这是以下代码的显示部分。
  • 但是,如果数据库中Area json属性设置为“ Hide”,则* ngIf代码将转换为False,并处理“ elseBlock”代码块。这是以下代码的隐藏部分。
  • 我正在努力处理“ elseBlock”代码段。我想做的是不显示区域模块,而是以编程方式为区域模块提交“”(空白)(因为在创建新联系人时会用到它)。我该怎么做呢?我感到难过。下面是到目前为止的代码。我想我很亲密,但需要一些帮助。
          <div *ngIf="!hideComponent('area', 'hide'); else elseBlock" class="col-12">
          <!-- This logic is when the Area module is displayed. -->
            <div class="form-group">
              <label for="area">Area <small>(multi select available)</small><span class="mandatory">*</span></label>

              <select class="form-control input-background" name="area"
                [(ngModel)]="contact.area" #contactArea="ngModel"
                [ngClass]="{'is-invalid':contactArea.errors &&
                contactArea.touched}" multiple required>
                <option *ngFor="let areaFilter of areaFilters"
                  value={{areaFilter.key}}>
                  {{areaFilter.value}}
                </option>
              </select>

              <div [hidden]="!contactArea.errors?.required"
                class="invalid-feedback">
                Area Required
              </div>
            </div>
          </div>

          <!-- This logic is when the Area module is hidden.  We set a default value of "" (blank). -->
          <ng-template #elseBlock>
            <select name="area"
            [(ngModel)]="contact.area" #contactArea="ngModel">
              <option value="">
                ""
              </option>
            </select>
          </ng-template>
        </div>
评论