Как предварительно выбрать первую радиокнопку в Angular? - PullRequest
0 голосов
/ 07 мая 2020

Мне нужно показать динамический c список радиокнопок, где всегда должен быть выбран первый. Я сделал это с:

[checked]="i === 0"

, но как только я добавил:

[(ngModel)]="item.modifType"

Первый RB не был выбран снова, а только что был выбран последний RB. Мне нужно сохранить ngModel. Так что я могу сделать? Я уже пробовал не использовать [checked] = "i === 0", а просто сравнивать ngmodel со значением RB. Все еще не работает.

Это мой список RB:

    <div class="card-body">
               <div *ngFor='let item of items; let i = index'>
                    <input type="radio" id="{{ item.id }}" name="modifType" value="{{ item.modifType }}" 
                    [checked]="idx === 0" 
                    [(ngModel)]="item.modifType" (change)='radioChecked( item.id, i )'>
                    <label class="form-check-label"> &nbsp; {{ item.modifType }} </label>
               </div>
    </div>

, а это остальной код:

export class ModifComponent implements OnInit {

    items: any = { ErrorDesc: '0' };
    error = false;
    msgError: string;
    modifType: any;

sModifType() {
        this._sharedService.sModifType().subscribe(
            (response: any) => {
                if (response.Status === 'success' || response.StatusMessage === 'success') {
                    this.items = JSON.parse(response.Data);
                } else if (response.Status === 'error' || response.StatusMessage === 'error') {
                    this.items = { ErrorDesc: response.Message };
                    this._sharedService.saveError(response.Data, 20, 'modification').subscribe((data2: any) => {
                        console.log(data2);
                    });
                }
            },
            (error: any) => {
                this.items = { ErrorDesc: error };
                this.msgError = error.message;
            }
        );
    }
}

СПАСИБО.

Ответы [ 4 ]

2 голосов
/ 07 мая 2020

Проблема заключается в использовании [(ngModel)]="item.modifType" заменить его на [value]="item.modifType"

https://stackblitz.com/edit/angular-ivy-u7aucf

 <div class="card-body">
               <div *ngFor='let item of items; let i = index'>
                    {{i==0}}
                    <input type="radio" id="{{ item.id }}" name="modifType" [value]="item.modifType" 
                    [checked]="i === 0">
                    <label class="form-check-label"> &nbsp; {{ item.modifType }} </label>
               </div>
    </div>
1 голос
/ 07 мая 2020

имеют специальный вызов переменной selectedRadioButton. В вашем HTML вы сделаете

<input type="radio" [(ngModel)]="selectedRadioButton" value="{{ item.id}}"/>

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

1 голос
/ 07 мая 2020

Попробуйте установить начальное значение для привязки. В разметке Angular вы используете

[(ngModel)]="item.modifType"

. Вы определяете items как любой объект и modifType как любой, но вы не указываете modifType как фактическое свойство item.

Скорее, в разметке используйте следующее:

<div class="card-body">
           <div *ngFor="let item of items; let i = index">
                <input type="radio" id="{{ item.id }}" name="modifType" value="ModifType Value" [(ngModel)]="item.modifType" (change)="radioChecked( item.id, i )">
                <label class="form-check-label"> &nbsp; {{ item.modifType }} </label>
           </div>
</div>

И в компоненте используйте следующее. Обратите внимание на добавленный modifType в определении items, что делает его массивом для итерации, устанавливает значение, соответствующее свойству value в вашей разметке, а затем комментирует следующую строку modifType.

Поскольку вы указываете значение item.modifType, он сообщает Angular, который выбирается с самого начала. Кроме того, поскольку вы использовали значение item.modifType, это вызывает круговое l oop (что-то должно предоставлять значение для item.modifType, и оно не может быть просто текущим неинициализированным значением или останется таковым) .

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

export class ModifComponent implements OnInit {

    items: any[] = [{ ErrorDesc: '0', modifType: 'ModifType Value' }];
    error = false;
    msgError: string;
    //modifType: any;

sModifType() {
        this._sharedService.sModifType().subscribe(
            (response: any) => {
                if (response.Status === 'success' || response.StatusMessage === 'success') {
                    this.items = JSON.parse(response.Data);
                } else if (response.Status === 'error' || response.StatusMessage === 'error') {
                    this.items = { ErrorDesc: response.Message };
                    this._sharedService.saveError(response.Data, 20, 'modification').subscribe((data2: any) => {
                        console.log(data2);
                    });
                }
            },
            (error: any) => {
                this.items = { ErrorDesc: error };
                this.msgError = error.message;
            }
        );
    }
}
0 голосов
/ 07 мая 2020

Я заставил это работать, ребята, большое спасибо за вашу помощь.

Это то, что у меня сработало:

Я удалил [checked]="idx === 0"

и изменил this [value]="item.modifType" // добавил [] к значению

, а этот [ngModel]="userSelection.chosen" // ngModel только с [], чтобы предоставить параметр из TS

Затем в файле TS я добавил:

export class ModifComponent implements OnInit {
    items: any = { ErrorDesc: '0' };
    error = false;
    msgError: string;
    modifType: any;
    userSelection = {                   // this is new
        chosen: 'Bank Account'
    };

будучи «выбранным» значением ввода, которое я хотел выбрать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...