Question

我正在创建一个移动应用程序，允许用户在问卷中回答某些问题。问卷完成后，用户将其保存在LocalStorage中。当他进入页面时，用户可以在按钮上看到所有先前回答的问卷。我想证明先前已填满的quesitonnaire，但他无法更改任何答案。

我该怎么做（禁用任何修改）？

我正在使用Ionic 3。

这是我如何创建调查表的代码示例。

    <ion-item>
      <ion-label>{{ 'PREVISIT_fever_or_infection' | translate }}</ion-label>
      <ion-select [(ngModel)]="qObj.feverinfectionlastrelapse" interface="popover">
        <ion-option value="yes">Yes</ion-option>
        <ion-option value="no" checked>No</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>{{ 'PREVISIT_overheated' | translate }}</ion-label>
      <ion-select [(ngModel)]="qObj.overheatedlastrelapse" interface="popover">
        <ion-option value="yes">Yes</ion-option>
        <ion-option value="no" checked>No</ion-option>
      </ion-select>
    </ion-item>

    <p>{{ 'PREVISIT_symptom_experienced' | translate }}<ion-icon name="add" class="more-icon"></ion-icon> {{ 'PREVISIT_symptom_experienced2' | translate }}</p>

    <!-- Symptom list -->
    <ion-item *ngFor="let symptom of symptoms">
      {{symptom.label | translate}}
      <ion-label>{{symptom.label | translate}} <ion-icon name="add" class="more-icon" [hidden]="!symptom.more"></ion-icon></ion-label>
      <ion-checkbox [(ngModel)]="symptom.value"></ion-checkbox>
    </ion-item>

    <!-- more detailed questions list -->
    <div *ngFor="let symptom of symptoms">
        <h5 *ngIf="symptom.value&&symptom.more" class="more-detailed-questions-spacer">{{symptom.label | translate}}</h5>

        <div *ngIf="symptom.value">
          <ion-item *ngFor="let question of symptom.moreList">
              <ion-label>{{question.name | translate}}</ion-label>
              <ion-select [(ngModel)]="question.value" interface="popover">
                <ion-option *ngFor="let condition of question.conditions" [value]="condition.value">{{condition.txt}}</ion-option>  
              </ion-select>
            </ion-item>

这是调查表的屏幕截图。

Answer 1

您可以使用布尔型变量类型的Subject，并使用相同的变量来检查用户是否已使用 [disabled]="yourBoolean"

加载了详细信息并禁用了表单/元素

如果您使用的是单一表格，则不必选择主题，则只需使用布尔变量即可。

this.qObj = JSON.parse(localStorage.getItem('qObj'));
this.readOnly = true;

和

<ion-select  [disabled] = "readOnly" [(ngModel)]="qObj.feverinfectionlastrelapse" interface="popover">

Answer 2

您可以在调查表组件上保持只读状态，

this.qObj = JSON.parse(localStorage.getItem('qObj'));
this.isReadOnly = typeof qObj !== 'undefined' && qObj !== null

对于输入控件，您可以分配此变量

<ion-item>
  <ion-label>{{ 'PREVISIT_fever_or_infection' | translate }}</ion-label>
  <ion-select [disabled] = "isReadOnly" [(ngModel)]="qObj.feverinfectionlastrelapse" interface="popover">
    <ion-option value="yes">Yes</ion-option>
    <ion-option value="no" checked>No</ion-option>
  </ion-select>
</ion-item>

<ion-item *ngFor="let symptom of symptoms">
  {{symptom.label | translate}}
  <ion-label>{{symptom.label | translate}} <ion-icon name="add" class="more-icon" [hidden]="!symptom.more"></ion-icon></ion-label>
  <ion-checkbox [disabled] = "isReadOnly" [(ngModel)]="symptom.value"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label color="primary">Inline Label</ion-label>
  <ion-input [readonly]="isReadOnly" placeholder="Text Input"></ion-input>
</ion-item>

显示填写的问卷

2 个答案: