角度2：デフォルトのラジオボタンを選択

Question

私は（彼らは動的に生成されていない）2つのラジオボタンがあります。

<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つのラジオボタンがあるようですが、orderbydescendingです。それがあなたの意図であるかどうかはわかりませんが、問題を引き起こす可能性があります。

私の個人的な側面のプロジェクトのコードは、あなたに良いアイデアを提供しています。あなたが任意のラジオボタンをしたくない場合は

@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 

を置きます変数orderbydescending nullにassignを選択しました。

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

に：あなたは[value]とラジオボタンの値を割り当てた場合、適切なラジオボタンがチェックされます

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

：

orderbydescending = 'null; 

Answer 3

もしorderbydescendingとrecordStartDateは、コンポーネントクラスのメンバーであります上の例の場合、変数がorderbydescendingであるため、デフォルトで昇順ラジオボタンがチェックされますそれは+recordStartDateに設定されています。

注：サンプルコードの変数は、使用しているデータの種類が正確にわからないため、anyです。あなたのデータはおそらくより特定のデータ型を持つでしょう。