角2：默认单选按钮选择

Question

我有两个单选按钮（他们没有动态生成）：

<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" [value]="['+recordStartDate']">Ascending<br> 
<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" [value]="['-recordStartDate']">Descending 

如何使默认选中的单选按钮中的一个？

谢谢！

编辑

按钮的价值观正在通过该配管（即不是一个组成部分，本身......不知道这是值得一提的？）。该应用程序非常简单，单选按钮只是硬编码到app.component。管道是否是初始化默认选中哪个单选按钮的正确位置？

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({name: 'orderBy', pure: false}) 
export class OrderByPipe implements PipeTransform { 

static _OrderByPipeComparator(a:any, b:any):number{ 

    if((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))){ 
    //Isn't a number so lowercase the string to properly compare 
    if(a.toLowerCase() < b.toLowerCase()) return -1; 
    if(a.toLowerCase() > b.toLowerCase()) return 1; 
    } 
    else{ 
    //Parse strings as numbers to compare properly 
    if(parseFloat(a) < parseFloat(b)) return -1; 
    if(parseFloat(a) > parseFloat(b)) return 1; 
    } 

    return 0; //equal each other 
} 

transform(input:any, [config = '+']): any{ 

    if(!Array.isArray(input)) return input; 

    if(!Array.isArray(config) || (Array.isArray(config) && config.length == 1)){ 
     var propertyToCheck:string = !Array.isArray(config) ? config : config[0]; 
     var desc = propertyToCheck.substr(0, 1) == '-'; 

     //Basic array 
     if(!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+'){ 
      return !desc ? input.sort() : input.sort().reverse(); 
     } 
     else { 
      var property:string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-' 
       ? propertyToCheck.substr(1) 
       : propertyToCheck; 

      return input.sort(function(a:any,b:any){ 
       return !desc 
        ? OrderByPipe._OrderByPipeComparator(a[property], b[property]) 
        : -OrderByPipe._OrderByPipeComparator(a[property], b[property]); 
      }); 
     } 
    } 
    else { 
     //Loop over property of the array in order and sort 
     return input.sort(function(a:any,b:any){ 
      for(var i:number = 0; i < config.length; i++){ 
       var desc = config[i].substr(0, 1) == '-'; 
       var property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-' 
        ? config[i].substr(1) 
        : config[i]; 

       var comparison = !desc 
        ? OrderByPipe._OrderByPipeComparator(a[property], b[property]) 
        : -OrderByPipe._OrderByPipeComparator(a[property], b[property]); 

       //Don't return 0 yet in case of needing to sort by next property 
       if(comparison != 0) return comparison; 
      } 

      return 0; //equal each other 
     }); 
    } 
} 

编辑2

所以在component.app.ts我已经编辑我的export class AppComponent{以下几点：

export class AppComponent { 
    artists = ARTISTS; 
    currentArtist: Artist; 
    orderbydescending = ['-recordStartDate']; 

showArtist(item) { 
    this.currentArtist = item; 

}}

这工作防止以前的条款错误，但实际上并没有选中单选按钮。它仍然看起来好像没有被选中 - 尽管它的功能就像它一样。这有意义吗？

Answer 1

如果你在使用2路绑定的Angular 2+中进行此操作，在使用此HTML的组件中，可以尝试初始化与输入相关联的值。

// in your component ts file 
orderbydescending: boolean = true; 

您可以使HTML保持不变。虽然，您似乎有2个单选按钮与相同的数据值相关联，但顺序依次递减。我不知道这是你的意图，但它看起来可能会导致问题。

下面是我的个人项目中的一些代码，以便给您一个更好的想法。

@Component({ 
    selector: 'gmu-home-page', 
    templateUrl: './home-page.component.html', 
    styleUrls: ['./home-page.component.css'] 
}) 
export class HomePageComponent implements OnInit { 
    // here you would put your variables 
    myFlag: boolean = true; 
    constructor() { } 
    ngOnInit() { 
    } 
} 

Answer 2

在组件

radioValue = {valueAsc: 'Asc', valueDesc: 'Desc'} ; 
orderbydescending = 'Asc'; 

试试这个，在模板中把这个

<input type="radio" name="radioGroup" [(ngModel)]="orderbydescending" [value]="radioValue.valueAsc">Ascending 

<input type="radio" name="radioGroup" [(ngModel)]="orderbydescending" [value]="radioValue.valueDesc">Descending 

有了这个第一个单选按钮被选中，如果你不希望任何单选按钮选择分配给变量order by下降null。

orderbydescending = 'null; 

Answer 3

如果orderbydescending和recordStartDate是你的组件类的成员：

<input type="radio" name="order" [(ngModel)]="orderbydescending" [value]="+recordStartDate">Ascending<br> 
<input type="radio" name="order" [(ngModel)]="orderbydescending" [value]="-recordStartDate">Descending 

在：

@Component({ 
    ... 
}) 
export class MyComponent { 
    public recordStartDate: any = ... 
    public orderbydescending: any = +recordStartDate; 
    ... 
} 

如果你[value]分配的单选按钮值相应的单选按钮将被选中上面显示的情况下，默认会检查升序单选按钮，因为orderbydescending变量处于它专门设置为+recordStartDate。

注：我的示例代码中的变量类型为any，因为我不确切知道您使用的数据类型。您的数据可能会有更具体的数据类型。