Angular-如何在页面加载的下拉菜单中自动显示值

Question

我正在开发一个 Angular 应用程序，其中一个页面上有一个带有两个下拉菜单的表单，显示日期（第一个显示日期和月份，第二个显示年份）。

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

在 HTML 中，下拉菜单显示为：

<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 函数在临时提醒.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

即日期和月份的日期值。

编辑

我刚刚发现在临时提醒.ts 文件的开头有以下块：

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

所以很明显，这是用于格式化日期显示方式的内容。

Answer 1

incomeYear 正确显示的原因是，您的 ngModel searchOptions.incomeYear 具有 incomeYears JSON 中可用的值（2018）用于显示收入年份下拉菜单的那个。

<option *ngFor="let incomeYear of incomeYears" value="{{ incomeYear }}">{{ incomeYear }}</option>

您需要验证您的 provisionalDates JSON 值 (provDate.ddmm) 是否具有与您的 ngModel searchOptions.provisionalDate 值类似的任何值。

 <option *ngFor="let provDate of provisionalDates" value="{{ provDate.ddmm }}">{{ provDate.label }}</option>