5

select属性を介していくつかのデータを取り込み、必要なオプションをレンダリングする単純なコンポーネントを作成しようとしています。この選択コンポーネントを別のコンポーネントのテンプレート内で使用する予定です。たとえば、PageComponentのテンプレート( page.template.html )です。

を使用して PageComponent の変数をselectコンポーネントにバインドしています[(ngModel)]。selectオプションを選択すると、変数の値が期待どおりに更新されますが、コンポーネントで手動選択をトリガーせずに、ページの読み込み時に最初のオプションを指すように設定するにはどうすればよいですか?

これがコードです。

page.template.html 内

<select ui-select 
        [options]="options" 
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'">
</select>
{{alertType}} <!-- To see the value while debugging -->

page.component.ts では、PageComponentクラス

alertType:any;
options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

select.component.ts 内

import {Component, Input} from '@angular/core'

@Component({
  selector: '[ui-select]',
  template: `
    <option *ngIf="defaultValue" value="-1">{{defaultValue}}</option>
    <option *ngFor="let option of options" [value]="option.id">{{option.value}}</option>
  `
})
export class SelectComponent {
  @Input() options: any;
  @Input() defaultValue: string;
}

現在、{{alertType}}値は最初は何も表示されず、selectボックスから新しいオプションを選択したときにのみ更新されます。

alertTypeデフォルトで未定義に設定されているために発生していることは理解していPageComponentますが、ページの読み込み時に最初のオプション値に設定する方法がわかりません。

アップデート

元の質問には回答がありましたが、これに関してもう 1 つ質問があったので、質問を更新しました。

更新されたコードでは、selectコンポーネントはテンプレートからカスタム プロパティを受け取り、そのデフォルト値defaultValueの条件をレンダリングします。<option>

defaultValueが設定されている場合alertType、その値を持つ必要があるか、そうでない場合は、optionsリストの最初の項目の値を持つ必要があります。

PS - コンポーネントの構築に使用されたアプローチについてコメントがある場合は、回答に自由に追加してください。学習に役立ちます。

4

3 に答える 3

5

したがって、提供されたものであろうと（最初のオプション）alertTypeであろうと、選択した値に設定する必要がありますoptions。defaultValue

AfterViewInitこれは、フックを使用して行うことができます。

変更されたコードは..

@Component({  
  selector: 'my-app',
  directives:[ 
    SelectComponent
  ],
  template : `<select ui-select
        [options]="options"
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'" #mySelect>
</select>
{{alertType}}`
})
export class App implements AfterViewInit{
  @ViewChild('mySelect', {read: ViewContainerRef}) mySelect;
options = [
    {id: 1, value: "item-1", selected: false},
    {id: 2, value: "item-2", selected: true},//if all options will be false then defaultValue will be selected
    {id: 3, value: "item-3", selected: false}
];
alertType: any;

 ngAfterViewInit() {
    this.alertType = this.mySelect.element.nativeElement.value;
  }

}

plunkerを作成しました。これを確認してください!!

于 2016-07-08T04:35:29.340 に答える
2

次のように試すことができます。

options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

alertType: any = options[0].id;
于 2016-07-05T07:23:07.570 に答える
0

新しい質問ではselected、ui-select コンポーネントで属性を利用できます。

<option *ngIf="defaultValue" selected="true" value="-1">{{defaultValue}}</option>
于 2016-07-05T07:36:28.543 に答える