无法在“活动”表单上的<ion-select>上设置默认选择

时间:2017-03-26 03:43:20

标签: angular ionic-framework ionic2

我需要以被动方式动态加载public class Palindrome { public boolean isPalindrome(String s) { if (s == null || s.length() == 0) { return true; } int front = 0; int end = s.length() - 1; while (front < end) { while (front < s.length() && !isvalid(s.charAt(front))){//check border front++; } if (front == s.length()) { // for emtpy string return true; } while (end >= 0 && ! isvalid(s.charAt(end))) {//check border end--; } if (Character.toLowerCase(s.charAt(front)) != Character.toLowerCase(s.charAt(end))) { break; } else { front++; end--; } } return end <= front; } //check if the character is a letter or a digit private boolean isvalid (char c) { return Character.isLetter(c) || Character.isDigit(c); } } 。它工作正常。现在我需要设置默认选择。我已经使用了<ion-select>属性。但是它没有工作。可以你告诉我为什么?

这是the Plunker

应用程序/ home.page.html

selected

应用程序/ home.page.ts

<form [formGroup]="detailInformationForm" (submit)="goToSponsor(detailInformationForm)" novalidate>
    <ion-item>
      <ion-label>Donation</ion-label>
      <ion-select formControlName="donationdate">
        <ion-option *ngFor="let date of donationDates" value="{{date.donationdate}}" [selected]="date.isChecked">
          {{date.donationdate}}</ion-option>
      </ion-select>
    </ion-item>
       <button ion-button block type="submit" [disabled]="!detailInformationForm.valid">Next</button>
  </form>

更新

export class HomePage {
  donationDates:any=[];
  detailInformationForm: FormGroup;

  constructor(public navController: NavController,public formBuilder: FormBuilder) { 
      this.donationDates = [
       {
          id: null,
          donationid: "2",
          donationdate: "2017-03-12",
          datedescription: "Vad Bij",
          isChecked:true
      },
      {
        id: null,
       donationid: "2",
       donationdate: "2017-03-19",
       datedescription: "Sud satam",
       isChecked:false
     }]

     this.detailInformationForm = formBuilder.group({
      donationdate: ['', Validators.required]
    });
  }

}

1 个答案:

答案 0 :(得分:1)

反应形式的控件将管理所选项目。

不要指定selected属性,只需指定值即可 要选择的donationdate控件:

this.donationDates = [
  {
    id: null,
    donationid: "2",
    donationdate: "2017-03-12",
    datedescription: "Vad Bij",
    isChecked: true
  },
  {
    id: null,
    donationid: "2",
    donationdate: "2017-03-19",
    datedescription: "Sud satam",
    isChecked: false
  }
]
const checked = this.donationDates.find(donationDate => donationDate.isChecked);

this.detailInformationForm = formBuilder.group({
  donationdate:
    [
      checked ? checked.donationdate : null,
      Validators.required
    ]
});