Сохраните все входные данные пользователя

#javascript #html #angular #typescript #angular-material

Вопрос:

У меня есть таблица со столбцом для ввода пользователем. Очевидно, что таблица может содержать несколько строк, каждая строка с вводом для пользователя. Под столом у меня есть кнопка для сохранения. Мой вопрос: если пользователь вводит несколько входных данных, как я могу сохранить все входные данные? Пример: моя таблица выглядит примерно так:

 row1 -> input (user writes here: "stack")
row2 -> input (user writes here: "overflow")
saveButton

Я хочу сохранить «стек», а также «переполнение».
Мой код таков:

 <div class="mat-elevation-z8 layout-container">
  <table mat-table [dataSource]="dataSourceTable">
    <ng-container matColumnDef="userInput">
      <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Input</th>
      <td mat-cell *matCellDef="Input">
        <mat-form-field class="full-width">
          <input matInput/>
        </mat-form-field>
      </td>
    </ng-container>
  </table>
</div>
<button mat-raised-button color="warn" (click)="saveInput()">Save</button>

Ответ №1:

Вы можете определить свою ячейку следующим образом:

 <ng-container matColumnDef="userInput">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Input</th>
  <td mat-cell *matCellDef="let Input">
    <mat-form-field class="full-width">
      <input matInput [(ngModel)]="Input"/>
    </mat-form-field>
  </td>
</ng-container>

и настройте ngModel на свои Input данные.

1. Спасибо. Я постараюсь сказать вам, работает ли это.

2. Не работает, потому что, если вы что-то введете, это будет изменено во всех строках.

3. Нет, в чем-то ты ошибаешься. Я только что сделал развилку другого проекта и кое-что изменил, чтобы дать вам представление. Пожалуйста, взгляните на это stackblitz.com/edit/…

4. Спасибо. Я использовал [(ngModel)]=»ввод», ввод был переменной в ts, и поэтому не работал.

Ответ №2:

Ты можешь сделать пару вещей:

Локальное хранилище
Объект локального хранилища хранит данные без даты истечения срока действия. Данные не будут удалены при закрытии браузера и будут доступны на следующий день, неделю или год. Чтобы установить элемент:
```
 localStorage.setItem(identifier, value)
 
```
Чтобы получить товар:
```
 localStorage.getItem(identifier)
 
```
Хранение сеансов
Объект хранения сеанса-это просто локальное хранилище, но он удаляется по окончании сеанса (он же закрывает вкладку). Чтобы установить элемент:
```
 sessionStorage.setItem(identifier, value)
 
```
Чтобы получить товар:
```
 sessionStorage.setItem(identifier)
 
```
Файлы cookie
Файлы cookie подобны переменным, но когда веб-сервер отправляет веб-страницу в браузер, соединение отключается, и сервер забывает все о пользователе.
```
 document.cookies
 
```

Ответ №3:

Вы можете использовать Formbuilder , а затем добавить поля ввода. Затем вы добавляете метод onSubmit() для обработки заполненной формы, которая вызывается в <form> теге, и добавляете кнопку типа отправить.

Вы можете следовать руководству здесь для получения подробной информации о том, как это сделать.