Как установить флажок для пересчета динамических данных в Angular 6, используя скрипт типа - PullRequest
0 голосов
/ 05 июля 2018

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

Можно ли использовать rxjs для фильтрации данных? Каков наилучший способ или способ для достижения привязки данных? Должен ли я переместить некоторый код в свой сервис, чтобы два компонента могли обмениваться данными?

Вот код!

1 Ответ

0 голосов
/ 05 июля 2018

Снимите [значение] с вашего флажка, только [(ngModel)]

  <input type="checkbox" class="form-check-input" 
        [attr.id]="filters.question + '_' + (i+1)" 
         [(ngModel)]="option.checked" />

Ну, теперь ваш "вариант" не может быть строкой. Да, ваш filters.rows - это массив строк. Мы можем преобразовать в массив Object

   //when you make the _newArray.push, you must make some like
   _newArray.push({
              question : item.DQuestionName,
              text: item.DQuestionText,
              rows : item.DOptions.map((p)=>{
                         return {text:p,checked:false}
                     }),
              columns: ["responses","%","Rank","low","high","+/-"]
            });  

Посмотрите, как преобразовать массив item.DOptions в массиве объектов с помощью map

Метка становится как

<label [attr.for]="filters.question + '_' + (i+1)">{{option.text}}
</label>

Теперь, если вы напишите в своем .html

<code>        <pre> Lang:{{_filtersArray[0].rows|json}}
 X1:{{_filtersArray[1].rows|json}}
 X2:{{_filtersArray[2].rows|json}}

Вы можете увидеть проверенный

С измененным кодом мы можем сделать функцию-получатель наподобие

get response()
  {
    return this._finalArray.map((p)=>{
      return {question:p.question,rows:p.rows.filter(r=>r.checked).map(q=>q.fields)}
    })
  }

То есть, с каждым элементом this._finalArray мы создаем объект. Этот объект имеет два свойства: «вопрос» (равно вопросу) и строки. Rows это массив. сначала отфильтруйте проверенный ответ, затем преобразуйте этот проверенный ответ, чтобы получить только свойство "fields"

Вы можете увидеть результат как:

<code><pre> {{response|json}}
...