angular - 如何使用 ionic 存储在 sqlite db 中保存 ionic 4 问题数据？

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;
  });
}

我必须做的第二件事是确保我的 ngModel 在 ion-list *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>

我的保存方法只是覆盖我从中提取表单的键/值对

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