时间戳

首页 > 解决方案 > *ngFor 添加空格以选择 Angular 形式

angular - *ngFor 添加空格以选择 Angular 形式

问题描述

在 Angular 表单中使用 *ngFor 循环会在选择项之前和之后添加空格。这会导致下游代码出错，因为它很难在选择中修补或设置值（即从用于预填充表单的数据库中存储的值）。角版本 12.1.4。

如果我只是在离子选择中手动输入数据，则不会发生这种情况。

所以有两个问题：为什么会发生这种情况以及如何摆脱这种行为？

home.page.ts：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public nameForm = new FormGroup({
    name: new FormControl('', Validators.required),
    name1: new FormControl('', Validators.required),
  });

  nameList: string[] = ['Louise','Nancy','Kate'];

  constructor(){}

  public onSubmit() {
    console.log("Does name1 have whitespace???", this.nameForm.value);
  }
}

主页.html

<ion-content>

<form [formGroup]="nameForm" (ngSubmit)="onSubmit()">
    <ion-item>
        <ion-label>Choose name</ion-label>
        <ion-select formControlName="name">
          <ion-select-option>Louise</ion-select-option>
          <ion-select-option>Nancy</ion-select-option>
          <ion-select-option>Kate</ion-select-option>
        </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Choose name1</ion-label>
      <ion-select formControlName="name1">
        <ion-select-option *ngFor="let n of nameList">
        {{n}}
        </ion-select-option>
      </ion-select>
    </ion-item>

    <button type="submit">Submit</button>

  </form>

</ion-content>

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

控制台日志输出：

name1 有空格吗？？？{name：'路易丝'，name1：'路易丝'}

标签： angular

解决方案

更新：我想知道这是否是我完成 html 的方式中的一个新行问题。是的，如果它改为：

<ion-select-option *ngFor="let n of nameList">{{n}}</ion-select-option>

我得到没有空格的值！

name1 有空格吗？？？{name：“路易丝”name1：“路易丝”}

推荐阅读