Значения модели теряются при переключении вкладок - PullRequest
Новая
       6

Значения модели теряются при переключении вкладок

0 голосов
/ 16 января 2019

Я работаю в приложении, которое использует вкладку 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>

Проблема, с которой я сталкиваюсь, заключается в том, что я ввожу значение метки времени, сохраненное в модели configDetails на app.component, и имя таблицы, сохраненное в модели tbl_nm header.component, а затем переключаюсь на второе и затем вернуться к первой вкладке, имя таблицы теряется. Значение временной метки все еще присутствует.

Почему значение введенного имени таблицы теряется при переключении вкладок? Я не думаю, что это проблема взаимодействия родитель-потомок, потому что app.component может прочитать введенное значение имени таблицы, введенное, когда нажата кнопка «Отправить», и при условии, что я не переключил вкладки в первую очередь.

1 Ответ

0 голосов
/ 16 января 2019

Когда вы используете 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>
...