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函数在临时提示中定义。

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字段也不会自动显示值？它们都显示了单击下拉菜单时期望的值范围，并且我可以正确选择一个值，只是页面首次加载时，日期字段为空白，而不是显示其选项之一，但是year字段显示其选项之一。

页面加载后，表单显示为：

为什么年份会自动显示一个值，而日期/月份却不显示？如果单击下拉列表，则可以看到所有选项均已正确填充：

用于检索日期的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

即日和月的日期值。

修改

我刚刚发现，临时文件-reminders.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>

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

1 个答案: