Question

我正在使用使用Clarity标签的应用程序。这是我的app.component文件中的代码。

<clr-tabs>
    <clr-tab>
    <button clrTabLink>General1</button>
      <ng-template [(clrIfActive)]="generalActive">
          <clr-tab-content>
              <form clrForm clrLayout="horizontal">   
                  <clr-input-container>
                      <label class="required">Delta Update Timestamp</label>
                      <input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts"  [ngModelOptions]="{standalone: true}"/>                                     
                  </clr-input-container>             
                  <header-comp></header-comp>
              </form>
              <button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
          </clr-tab-content>
      </ng-template>
  </clr-tab>

...

在第一个选项卡中，我嵌入了另一个名为header-comp的组件，其定义为

<clr-input-container>
    <label class="required">Table Name</label>
    <input clrInput type="text" [(ngModel)]="tbl_nm" size="50"  [ngModelOptions]="{standalone: true}"/>                                     
    <clr-control-error>You must provide a table name</clr-control-error>
</clr-input-container>

我遇到的问题是输入时间戳值（存储在app.component的configDetails模型中）和表名（存储在header.component的tbl_nm模型中），然后切换到第二个回到第一个选项卡，表名将丢失。时间戳值仍然存在。

为什么切换选项卡时输入的表名值丢失？我不认为这是父子沟通的问题，因为app.component可以读取在选择“提交”按钮并且没有我首先切换选项卡的情况下输入的输入表名的值。

Answer 1

当您使用ng-template和结构化指令clrIfActive时，实际上在切换选项卡时会从DOM中删除呈现的模板。这是为了提高性能，在许多情况下是理想的。如果您不希望重置标签，请删除模板和clrIfActive指令。

<clr-tabs>
  <clr-tab>
    <button clrTabLink>General1</button>
    <clr-tab-content>
          <form clrForm clrLayout="horizontal">   
              <clr-input-container>
                  <label class="required">Delta Update Timestamp</label>
                  <input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts"  [ngModelOptions]="{standalone: true}"/>                                     
              </clr-input-container>             
              <header-comp></header-comp>
          </form>
          <button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
      </clr-tab-content>
  </clr-tab>
</clr-tabs>

切换标签时模型值丢失

1 个答案: