Множественный коврик-радио-кнопка выбрана в группе мат-радио

`<mat-radio-group [ngClass]="cssForGroup" name="test">
      <mat-radio-button *ngFor="let option of options | filter:searchText" 
                class="cssForRow"
                [value]="option" 
                [checked]="option.isSelected"
                (change)="selectOption($event)">         
                        {{ option.value }}
                        <div class="info" [hidden]="!option.info">{{option.info}}</div>
            </mat-radio-button>
 </mat-radio-group>`

Это код, который у меня есть для радиокнопок в группе, использующей угловой материал, где опция - это объект. У меня проблема, когда option.value может быть одинаковым для нескольких параметров, а option.info - другим. Но когда я выбираю радиокнопку такой случай. Все кнопки с одинаковым значением option.value выбираются в пользовательском интерфейсе.

Я пробовал добавить атрибут name в группу mat-radio-group. Я изменил атрибут value с объекта на уникальный ключ. Я пробовал trackBy в ngFor. Эти решения не исправили.

Может кто-нибудь помочь мне это исправить?


typescript angular radio-button angular-material radio-group
person Anish Unnikrishnan    schedule 12.08.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

У меня проблема, когда option.value может быть одинаковым для нескольких параметров, а option.info - другим.

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

//"WRONG" I don't know if you push the first or the last option
options=[{value:1,info:'one'},{value:2,info:'two'},{value:1,info:'one bis'}]

ты должен использовать

//"OK", If I choose the first option the value is 101, value%100=1
//      If I choose the last option the value is 201, value%100=1
//         and know that Is the last option
     
optionsValors=[{value:101,info:'one'},{value:102,info:'two'},{value:201,info:'one bis'}]

//or

optionsValors=this.options.map((x,index)=>
     ({value:index*100+x.value,info:x.info}))

Не забудьте использовать оператор модуля, если вы хотите получить реальное значение

value=value%100

Если ваш options.value - это строки, вы можете сделать что-то подобное, добавив букву и используя substr

ПРИМЕЧАНИЕ. Я предполагаю, что вы хотите сохранить в переменной значение параметров. Помните, что это Angular !! так почему бы не использовать [(ngModel)]?

<mat-radio-group [ngClass]="cssForGroup" name="test" [(ngModel)]="test">
      <mat-radio-button *ngFor="let option of options | filter:searchText" 
                class="cssForRow"
                [value]="option" >         
                        {{ option.value }}
                 <div class="info" [hidden]="!option.info">{{option.info}}</div>
       </mat-radio-button>
 </mat-radio-group>
person Eliseo    schedule 12.08.2020
comment
У меня вопрос. Я согласен с тем, что значение внутри моего объекта option не уникально. Но поскольку я привязываю атрибут значения к объекту option, не означает ли это, что я привязываю уникальные объекты к значению. Отслеживает ли внутри себя mat-radio-button ключ значения? Что, если у моего объекта option вообще нет ключа с именем value? Что в таком случае? Или это потому, что я использую option.value в качестве ключа для отображения? В таком случае будет ли использование карты любого типа возвращать тот же результат? - person Anish Unnikrishnan; 12.08.2020
comment
извините, я думал, вы используете [value] = option.id :: glubs :: Если вы хотите указать в качестве значения объект, используйте [ngValue] лучше, чем [value] (я думаю, что это проблема) и да , вы правы (извиняюсь за мою ошибку). - person Eliseo; 12.08.2020

arrow_upward
0
arrow_downward

У моего объекта параметров также был ключ с именем id. Идентификатор не был уникальным для всех объектов в массиве. (Промах с моей стороны.) Итак, когда я устанавливаю уникальные идентификаторы для каждого объекта в массиве. Это сработало. Я использую event / api из mat-radio-button для работы с выделениями. Следовательно, мне не пришлось использовать ngModel. (Но разве это хорошая практика !! ?? Но архитектурный дизайн этого углового проекта совсем другой. Другой вопрос.)

Но у меня здесь все еще необъяснимое поведение. Я не использую никаких средств, чтобы сообщить mat-radio-button об идентификаторе. Тогда почему это стало для него проблемой? Возможно, [value], а не [ngValue] вызвали проблему в DOM или во внутренней работе mat-radio-button, но я все еще использую [value], и ​​каким-то образом уникальный ключ 'id' решил эту проблему.

person Anish Unnikrishnan    schedule 12.08.2020