اتصال داده - تنظیم مقدار [(ngModel)] هنگام بارگذاری اولیه صفحه در Angular 2

من در حال تلاش هستم تا یک کامپوننت ساده select بسازم که دادههایی را از طریق ویژگیها دریافت کرده و گزینههای مورد نیاز را نمایش دهد. برنامه دارم از این کامپوننت select در داخل قالب یک کامپوننت دیگر، مثلا قالب PageComponent ( page.template.html ) استفاده کنم.

من یک متغیر از PageComponent را با استفاده از [(ngModel)] به مؤلفه select متصل میکنم. هنگام انتخاب یک گزینه، مقدار متغیر همانطور که انتظار میرود بهروزرسانی میشود، اما چگونه میتوانم هنگام بارگذاری صفحه آن را به اولین گزینه تنظیم کنم بدون اینکه یک انتخاب دستی در مؤلفه 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 روی undefined تنظیم شده است، اما نمیتوانم بفهمم چگونه آن را هنگام بارگذاری صفحه به مقدار گزینه اول تنظیم کنم.

بهروزرسانی

سوال اصلی پاسخ داده شده است اما من یک سوال دیگر در این مورد داشتم بنابراین سوال را بهروز کردم.

در کد بهروزشده، مؤلفه select یک ویژگی سفارشی defaultValue را از قالب دریافت میکند و یک <option> شرطی برای آن مقدار پیشفرض رندر میکند.

حال، چگونه بگویم که اگر defaultValue تنظیم شده باشد، alertType باید آن مقدار را داشته باشد و در غیر این صورت باید مقدار اولین مورد در لیست options را داشته باشد.

پ.ن - اگر نظری در مورد روشی که در ساخت مؤلفه استفاده شده دارید، لطفاً آن را در پاسخها اضافه کنید زیرا این به من کمک خواهد کرد که یاد بگیرم.

پاسخ شماره ۱

پس شما میخواهید 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;
  }

}

من یک پلانکر ساختهام، این را بررسی کن!!

پاسخ شماره ۲

میتوانید آن را اینطور امتحان کنید:

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

alertType: any = options[0].id;