角度-如何在页面加载时在下拉列表中自动显示值

我正在开发一个角度应用程序,其中一个页面上有一个表单,其中有两个下拉列表显示日期(day&第一个月,第二个年)。

显然,这个表单用于在加载页面时自动显示为所选记录输入的日期,但是最近已经停止这样做了。我最近才开始为这家公司工作,所以之前不知道这是如何/何时正常工作的。

<label for="provisionalDate" class="dropdown-label">
    Provisional Date:
    <select class="form-control" id="provisionalDate" name="provisionalDate" [attr.disabled]="loadingPayers ? '' : null" [(ngModel)]="searchOptions.provisionalDate" (change)="provDateChanged($event)" [class.error]="provDateError">
        <option *ngFor="let provDate of provisionalDates" value="{{ provDate.ddmm }}">{{ provDate.label }}</option>
    </select>
</label>

<label for="provisionalDate" class="dropdown-label">
    <!-- Calendar Year: -->
    <select class="form-control" id="incomeYear" name="incomeYear" [attr.disabled]="loadingPayers ? '' : null" [(ngModel)]="searchOptions.incomeYear" (change)="provDateChanged($event)" [class.error]="provDateError">
        <option *ngFor="let incomeYear of incomeYears" value="{{ incomeYear }}">{{ incomeYear }}</option>
    </select>
</label>

用于填充/更新这些字段的TypeScript函数在temporary-reminders.ts中定义:

this.datesService.getJustNextProvisionalDate().subscribe(
    response => {
        this.nextProvisionalDate = response;
        const selectedProvDate = this.nextProvisionalDate.provisionalDateFormattedForQuery.split('-');
        this.searchOptions.provisionalDate = selectedProvDate[1] + '-' + selectedProvDate[2];
        this.searchOptions.incomeYear = selectedProvDate[0];
        console.log("selectedProvDate[0]: ", selectedProvDate[0]);
        this.provDatesLoaded = true;
        if (this.firmLoaded) {
            this.doProvSearch();
        } else {
            this.fallbackSearchTimeout = setTimeout(() => {
                this.doProvSearch();
            }, 1000)
        }
        //console.log("this.nextProvisionalDate: ", this.nextProvisionalDate);
        //console.log("searchOptions.provisionalDate: ", this.searchOptions.provisionalDate);

        // firm subscription assumes searchOptions.provisionalDate is set, so it must be initialised after this
        if (this.firstload) {
            console.log("this.firstLoad: ", this.firstload);
            this.setSelectionSubscription();
            this.firstload = false;
        }
    },
    error => {
        const message = new Message();
        message.type = MessageType.ERROR;
        message.message = "An error occurred while retrieving the next provisional date.";
        this.messagingService.emitMessage(message);
    }
);

从我添加的调试中,我可以在控制台中看到,当页面加载时,所有日期变量的值都设置正确,但是由于某些原因,只有 incomeYear 下拉列表实际上是在第一次导航到页面时自动显示一个值。为什么不是 provisionalDate 字段是否也自动显示值?它们都显示了我在单击下拉列表时所期望的值范围,并且我可以正确地选择一个值,只是当页面第一次加载时,日期字段为空,而不是显示它的一个选项,而年份字段显示它的一个选项。

加载页面时,窗体显示为:

用于检索日期的PHP函数是:

public function getJustNextProvDate()
{
    $nextProvDate = DB::select("SELECT TOP 1 * FROM [db].[date].[provisional] PT WHERE PT.provisionalDate > getdate() ORDER BY PT.provisionalDate")[0];

    $provisionalDate = explode('.', $nextProvDate->provisionalDate)[0];
    $date = Carbon::createFromFormat( "Y-m-d H:i:s", $provisionalDate );

    $return = [
        'provisionalDate' => $nextProvDate->provisionalDate,
        'provisionalDateFormatted' => $date->format('d/m/Y'),
        //'provisionalDateFormatted' => $date->format('d/m'),
        'provisionalDateFormattedForQuery' => $date->format('Y-m-d'),
    ];

    return response()->json($return);
}

编辑

由 searchOptions.provisionalDate 是:

29 10

由 selectedProvDate[1] 是:

10

selectedProvDate[2]

29

i、 e.日的日期值;一个月。

编辑

public provisionalDates:any = [
    {"ddmm": "01-15", "label": "15 January" },
    {"ddmm": "01-28", "label": "28 January" },
    // etc
];

所以很明显,这是用来格式化日期显示方式的。