Невозможно создать свойство selectedTest для строки test1 - проблема с Angular - PullRequest
Новая
       8

Невозможно создать свойство selectedTest для строки test1 - проблема с Angular

0 голосов
/ 06 сентября 2018

Я хочу иметь несколько активных кнопок (если они выбраны), и когда я нажимаю на выбранную кнопку, я хочу удалить активный класс (переключатель).Как я могу это сделать?Если я делаю это, как показано ниже, у меня появляется ошибка:

ERROR TypeError: Cannot create property 'selectedTest' on string 'test1'

hmtl 

<div class="btn-group">
  <div class="btn btn-outline-secondary" *ngFor="let test of tests" (click)="selectTest(test)"
  [ngClass]="{active: isActiveTest(test)}">
     {{test}}
  </div>
</div>

ts 

import { Component } from '@angular/core';

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['./test.scss'],
})

export class TestComponent {
    tests: any;

    constructor() {
        this.tests = ['test1', 'test2', 'test3']
    }

    ngOnInit() {
    }

    selectTest(item) {
      item.selectedTest = !item.selectedTest;
    };

    isActiveTest(item) {
      return item.selectedTest;
    };
}

1 Ответ

0 голосов
/ 06 сентября 2018

проблема с вашим товаром. Вы зацикливаете массив, который содержит строковые значения, и когда вы хотите выбрать -> selectTest (item), вы предоставляете строковое значение, которое не является типом Object и не имеет параметра selectedTest, вы должны изменить свой массив содержать список объектов: 

this.test = [ 
  { value: 'test1', isSelected: false },
  { value: 'test1', isSelected: false },
  { value: 'test1', isSelected: false }
];

также измените функцию selectTest на: 

selectTest(item) {
  item.isSelected = !item.isSelected;
};

затем в html измените: 

<div class="btn-group">
    <div class="btn btn-outline-secondary" *ngFor="let test of tests" 
       (click)="selectTest(test)"
       [ngClass]="{ 'active': test.isSelected }">
       {{test.value}}
    </div>
</div>
...