角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，因爲我不確切知道您使用的數據類型。您的數據可能會有更具體的數據類型。