Как связать данные с флажком угловым 2? - PullRequest
Новая
       1

Как связать данные с флажком угловым 2?

0 голосов
/ 02 января 2019

1001 * JSON * 

[ {
  "code" : "TEST",
  "projectId" : "PROJECT",
  "name" : "TEST",
  "description" : "test",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : false
}, {
  "code" : "test",
  "projectId" : "PROJECT",
  "name" : "Test",
  "description" : "test 11",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
}, {
  "code" : "asdasd2122",
  "projectId" : "PROJECT",
  "name" : "TEST12",
  "description" : "ashdasdhl",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : false
}, {
  "code" : "test1a",
  "projectId" : "PROJECT",
  "name" : "TEST122",
  "description" : "a,sndkajlskdjlkajd",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
}, {
  "code" : "dasdasd",
  "projectId" : "PROJECT",
  "name" : "test123123",
  "description" : "asdasdasd",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
}, 
 {
  "code" : "asdasdTES",
  "projectId" : "PROJECT",
  "name" : "TEST123",
  "description" : "asdasdasd",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : true
} ]

HTML 

            <mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">

          <ng-container matColumnDef="SELECT">
            <mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
            <mat-cell *matCellDef="let element">
              <mat-checkbox>
              </mat-checkbox>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="NAME">
            <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="CODE">
            <mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="DESCRIPTION">
            <mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="CREATEDATE">
            <mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="UNAME">
            <mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="ISACTIVE">
            <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
            <mat-cell *matCellDef="let element">
              <mat-checkbox type="checkbox">
              </mat-checkbox>
            </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
        </mat-table>

Я пытаюсь привязать значения к флажку! значения в виде логического значения (TRUE | FALSE)

Я пытался привязать флажок с, но он не работает

Объяснение: перейти к моему стеку -> если я выберу любой флажок из столбца SELECT, столбец кода должен быть выбран (я просто хочу напечатать строку выбора столбца CODE в журнале консоли)

2) как связать логические значения в столбце с флажком, чтобы имя столбца было ISACTIVE, если active is false, флажок не установлен, если active равен true -> установлен флажок!

Вот моя ссылка на стек-биты, вам будет легко!

https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts

Ответы [ 4 ]

0 голосов
/ 02 января 2019

Используйте [флажок] и (изменить), чтобы показать, является ли element.active = true, и изменить значение element.active. И используйте условный оператор, чтобы показать (или нет) значение element.code 

<ng-container matColumnDef="CODE">
  <mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
  <mat-cell *matCellDef="let element">
      {{ element.active?element.code:"" }} 
  </mat-cell>
</ng-container>
...
<ng-container matColumnDef="ISACTIVE">
   <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
   <mat-cell *matCellDef="let element">
     <mat-checkbox type="checkbox" [checked]="element.active" 
                                   (change)="element.active=$event.checked">
     </mat-checkbox>
   </mat-cell>
</ng-container>

Обновление : лучше использовать ngModel -не [проверено] и (изменить) - 

<ng-container matColumnDef="ISACTIVE">
    <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
    <mat-cell *matCellDef="let element">
        <mat-checkbox type="checkbox" [(ngModel)]="element.active">
        </mat-checkbox>
    </mat-cell>
</ng-container>
0 голосов
/ 02 января 2019

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

КОМПОНЕНТ 

selectedCodes: string[] = [];

receiveCheckboxChange(code: string, value: MatCheckboxChange) {
   console.log(code, value.checked);
   this.updateCodes(code, value.checked);
}

updateCodes(code: string, selected: boolean) {
   const inArrayIndex: number = this.selectedCodes.indexOf(code);
   if (selected && inArrayIndex === -1) {
      this.selectedCodes.push(code);
   } else if (inArrayIndex !== -1) {
      this.selectedCodes.splice(inArrayIndex, 1);
   }
}

isSelected(code: string) {
    return this.selectedCodes.indexOf(code) !== -1;
}

ОБРАЗЕЦ 

<ng-container matColumnDef="ISACTIVE">
    <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
            </mat-checkbox>
        </mat-cell>
</ng-container>

Ключевой частью здесь является (change)="receiveCheckboxChange(element.code, $event)" - Вы можете предоставить любую информацию из element или даже сам объект element в вашу функцию. Тогда вам решать, что вы хотите оттуда.

После этого у вас будет массив выбранных кодов в переменной selectedCodes. Что вы делаете с ними оттуда, зависит от вас.

Блиц: https://stackblitz.com/edit/angular-gbf9kz-sgtrtv

0 голосов
/ 02 января 2019 
<ng-container matColumnDef="SELECT">
                <mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
                <mat-cell *matCellDef="let element">
                  <mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
                  </mat-checkbox>
                </mat-cell>
              </ng-container>

в файле ts 

change() {
    const result = this.offersColumnRowData.filter(x => x.Isselected == true);

console.log('result', result);
  }

Выбрано свойство в json 

"Isselected": false,
  "code" : "TEST",
  "projectId" : "PROJECT",
  "name" : "TEST",
  "description" : "test",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : false
0 голосов
/ 02 января 2019

Я обновил ваш стек, проверьте: https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts

Привязать данные к html-тегу флажка с помощью [checked]="element.active"

Получить значение активного свойства с помощью (change)="change(element)"

...