я создаю мобильное приложение, которое позволяет пользователю отвечать на некоторые вопросы в анкете. Когда анкета заполнена, пользователь сохраняет ее в 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>






Вы можете использовать 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>