Показать заполненную анкету

я создаю мобильное приложение, которое позволяет пользователю отвечать на некоторые вопросы в анкете. Когда анкета заполнена, пользователь сохраняет ее в LocalStorage. Когда он заходит на страницу, пользователь видит все предыдущие ответы на анкеты на кнопках. Я хотел бы показать ранее заполненный кеситонар, но он не может изменить ни одного ответа.

Как я могу это сделать (отключить любые модификации)?

Я использую 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>

Вот скриншот формы анкеты. Показать заполненную анкету

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
49
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать Subject типа переменной Boolean и использовать ту же переменную, чтобы проверить, загрузил ли пользователь детали и отключил ли форму / элементы с помощью [disabled] = "yourBoolean"

Если у вас одна форма, вам не нужно использовать тему, вы можете просто использовать логическую переменную

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

а также

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

Вы можете сохранить состояние "только чтение" в своем компоненте анкеты,

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>

Другие вопросы по теме