这里是一个例子

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>

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

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，则将选择第二个选项。

我建议您阅读the official documentation，以详细了解ngModel。

如何使用离子存储在sqlite db中保存离子4问题数据？

2 个答案:

这里是一个例子

HTML

TS