Question

我的数据库中有这个值Rating=7，我正在获取这个值并存储在editUserDetails = {}上。现在，我在浏览器中显示5到9个单选按钮，我想根据数据库值选择单选按钮。我的意思是我想用value = 7选择收音机。我写了这段代码，但是没有用。有什么问题，我需要提出什么。有人可以帮忙吗？

我的HTML

<div class="col-md-6" *ngFor="let Rating of rates">
            <input type="radio" name="Rating" [value]="Rating" [checked]="radioChange(Rating)"> 
            {{Rating.rating}}
          </div>

我的电话

rates:any=[
    {rating:"5"},
    {rating:"6"},
    {rating:"7"},
    {rating:"8"},
    {rating:"9"},
    ]

    radioChange(Rating){
     var match=false;
     if(this.editUserDetails.Rating===Rating){
       match=true;
     }else{}
     this.temp = 0;
     return match;
    }

Answer 1

强文本

//.ts file 

data:string;//gloabal declaration 

 rates:any=[
    {rating:"5"},
    {rating:"6"},
    {rating:"7"},
    {rating:"8"},
    {rating:"9"},
    ]
    
    
    ngOnInit(){
    
    this.data="7";//your formatt
    }

 <div class="col-md-6" *ngFor="let Rating of rates">
 <input type="radio" name="radiodata" [value]="Rating.rating" [(ngModel)]="data"> {{Rating.rating}}
                      </div>

Answer 2

使用内置的双向绑定可能会更容易。我的单选按钮看起来更像这样：

<div class="col-md-6" *ngFor="let Rating of rates">
            <input type="radio" 
                   name="Rating"
                   [value]="Rating"
                   [(ngModel)]="selectedRating"> 
            {{Rating.rating}}
</div>

然后该组件如下所示：

selectedRating:any;

rates:any=[
    {rating:"5"},
    {rating:"6"},
    {rating:"7"},
    {rating:"8"},
    {rating:"9"},
    ]

然后在ngOnit()中检索数据后：

   console.log(this.editUserDetails.Rating);
   this.selectedRating = this.rates.find(item => 
       item.rating === this.editUserDetails.Rating.rating);

这种复杂性是由于您绑定的是对象而不是数字。该代码在数组中找到 exact 匹配对象。

如果值确实是数字，则绑定数字可能会更容易。

<div class="col-md-6" *ngFor="let Rating of rates">
            <input type="radio" 
                   name="Rating"
                   [value]="Rating.rating"
                   [(ngModel)]="selectedRating"> 
            {{Rating.rating}}
</div>

然后在ngOnit()中检索数据后：

   // Note that this is assigning the numeric value, not the object
   console.log(this.editUserDetails.Rating.rating);
   this.selectedRating = this.editUserDetails.Rating.rating;

Answer 3

您应该这样做-

 <div class="col-md-6" *ngFor="let Rating of rates">
       <input type="radio" name="Rating" 
                          [value]="Rating" 
                         [checked]="this.editUserDetails.Rating === Rating"> 
                         <!-- above line marks your radio button checked -->
                          [value]="Rating" 
                       (change)="onSelectionChange(entry)" > 
                           {{Rating.rating}}
    </div>

如果您确实希望-onSelectionChange(entry)是组件中的一个功能，则当用户更改选项时，您可以执行任何操作-

onSelectionChange(entry) {
    this.selectedEntry = entry;
}

Answer 4

代码在某种程度上是好的，但是您将传递给函数radioChange作为包含and属性的参数和对象：

Rating = {rating: "6"}

因此，当您进行比较时，请使用===，并且比较对象必须相等，因此this.editUserDetails.Rating必须为：

Rating = {rating: "6"}

如果this.editUserDetails.Rating的值是单个数字作为String，则需要将比较更改为：

this.editUserDetails.Rating===Rating.rating

获取angular5中的单选按钮值

4 个答案: