Как сохранить данные ионного вопроса 4 внутри sqlite db, используя ионное хранилище?

Question

Что я делаю, это извлекаю основные данные вопроса из sqlite, используя этот код.

ts

openKeyValueTEST(value: string) {
  this.storage.get(value).then((val) => {
    this.auditTwoResults = JSON.parse(val);
    this.auditTwo = this.auditTwoResults.compliantTest;
    this.formNameTwo = value;
  });
}

this.formNameTwo = значение

это то, что

  "compliantTest": [
    { 
      questionnum: '1', 
      question: 'Some question', 
      text_name: 'text1', 
      radio_name: 'rad1', 
      select_name: 'sel1',  
      id: 'id1' 
    },
    { 
      questionnum: '2', 
      question: 'question again?', 
      text_name: 'text2', 
      radio_name: 'rad2', 
      select_name: 'sel2', 
      id: 'id2' }
  ],

То, что я пытаюсь сделать, это сделать мою форму стойкой. Пользователь может быть вне зоны действия сотовой сети или занять день или два, чтобы заполнить форму. Если возможно, я хотел бы перезаписать

this.formNameTwo

, чтобы включить заполненные данные формы.

Мои данные формы будут состоять из текста, переключателей иВыбрать. Ниже приведен пример моей формы. Когда я смогу, я назначу награду за этот вопрос.

      <ion-card-content>
        <div class="question">
            {{ item.question }}
        </div>

        <ion-radio-group  name="{{item.radio_name}}">         
          <ion-row class="radio-tags">
            <ion-item class="radio-tag" lines="none">
              <ion-label class="tag-label">compliant</ion-label>
              <ion-radio value="compliant" (click)="closeSelect(i)"></ion-radio>
            </ion-item>
            <ion-item class="radio-tagtwo" lines="none">
              <ion-label class="tag-label">non-compliant</ion-label>
              <ion-radio value="non-compliant" (click)="openSelect(i)"></ion-radio>
            </ion-item>
          </ion-row>
        </ion-radio-group>

        <div *ngIf="show[i]">
          <div>
            <ion-item >
              <ion-label position="floating">Findings Title</ion-label>
              <ion-textarea name="{{item.text_name}}"></ion-textarea>
            </ion-item>

            <ion-item>
              <ion-label class="ion-text-wrap">Company or Contractor</ion-label>
              <ion-select placeholder="Select" name="{{item.select_name}}">
                <ion-select-option value="1">1</ion-select-option>
                <ion-select-option value="2">2</ion-select-option>
              </ion-select>
            </ion-item>
          </div>
        </div>
      </ion-card-content>

Answer 1

Во-первых, откройте форму с помощью этого

openSavedForm(value: string) {
  this.storage.get(value).then((val) => {
    this.auditResults = JSON.parse(val);
    this.audit = this.auditResults;
    this.formInfo = value;
  });
}

Второе, что мне нужно было сделать, - убедиться, что мои ngModels имеют уникальные имена в списке ионов * ngFor

    <ion-list>
        <ion-card *ngFor="let item of audit; let i=index;">
            <ion-radio-group name="{{item.radio_compliant_name}}" [(ngModel)]="audit[i].radio_compliant_input">         
                <ion-row class="radio-tags">
                <ion-item class="radio-tag" lines="none">
                    <ion-label class="tag-label">compliant</ion-label>
                    <ion-radio value="compliant" (click)="openCompliantNA(i) ; closeSelect(i)"></ion-radio>
                </ion-item>
                <ion-item class="radio-tagtwo" lines="none">
                    <ion-label class="tag-label">non-compliant</ion-label>
                    <ion-radio value="non-compliant" (click)="openSelect(i) ; closeCompliantNA(i)"></ion-radio>
                </ion-item>
                <ion-item class="radio-tagfive" lines="none">
                    <ion-label class="tag-label">not-applicable</ion-label>
                    <ion-radio value="non-applicable" (click)="openCompliantNA(i) ; closeSelect(i)"></ion-radio>
                </ion-item>
                </ion-row>
            </ion-radio-group>

            <div *ngIf="show[i]">
                <div>
                <ion-item>
                    <ion-label class="ion-text-wrap">Closure Category</ion-label>
                    <ion-select placeholder="Select" name="{{item.select_closurecategory_name}}" [(ngModel)]="audit[i].select_closurecategory_input">
                    <ion-select-option value="Regulatory">Regulatory</ion-select-option>
                    <ion-select-option value="Non-Regulatory">Non-Regulatory</ion-select-option>
                    </ion-select>
                </ion-item>

                <ion-item>
                    <ion-label position="floating" class="ion-text-wrap"><span style="color:red" >* Corrective Actions Describe Action Required *</span></ion-label>
                    <ion-textarea name="{{item.text_corrective_name}}" [(ngModel)]="audit[i].text_corrective_input"></ion-textarea>
                </ion-item>
                </div>
            </div><!--end show-->
            </ion-card-content>
        </ion-card>
    </ion-list>

Myметод сохранения - это просто перезапись пары ключ / значение, которую я извлек из

async saveFormUpdates() {
  this.newAudit =this.audit;
  await this.storage.set( this.formInfo , JSON.stringify(this.newAudit));
}

Answer 2

Я не совсем уверен во внутренней работе вашего приложения, но я бы предложил использовать ngModel.

Вот пример

HTML

<ion-select name="{{item.select_name}}" [(ngModel)]="selectedValue">
  <ion-select-option value="1">1</ion-select-option>
  <ion-select-option value="2">2</ion-select-option>
</ion-select>

TS

openKeyValueTEST(value: string) {
  this.storage.get(value).then((val) => {
    this.auditTwoResults = JSON.parse(val);
    this.auditTwo = this.auditTwoResults.compliantTest;

    // I don't know how the data in your DB is structured, but this will
    // set the value of the select picker in the view.
    this.selectedValue = this.auditTwoResults.selected_value;

    this.formNameTwo = value;
  });
}

Приведенный выше код запросит ваше хранилище, а затем сохранит результат в this.selectedValue. Если выбрано значение 1, будет выбран первый вариант. Если это 2, тогда будет выбран второй вариант.

Я рекомендую вам прочитать официальную документацию , чтобы узнать больше о ngModel.