时间戳

首页 > 解决方案 > 错误类型错误：无法在数字“1”上创建属性“id”。角

angular - 错误类型错误：无法在数字“1”上创建属性“id”。角

问题描述

我正在使用 Angular 7，我需要从客户端向服务器端发送请求。这是需要实现的客户端请求的结构。

{
    "title" : "Test Title",
    "user": {
        "id" : 7
    },
    "category": {
        "id" : 2
    },
    "description" : "test description",
    "quantity" : "2"
    
}

这是角度的模型类。示例请求.ts

export class SampleRequest {
  title: string;
  user: { id: number};
  category: { id: number};
  description: string;
  quantity: number;
}

然后我使用角度反应形式获取输入数据。用户 ID 正在通过 JWT 令牌获取，即当前登录用户的 ID。这是模板文件。示例-request.component.html

<form novalidate [formGroup]="requestForm" (ngSubmit)="onSubmit()">
        <p>
          <mat-form-field class="form-field-width">
            <input matInput placeholder="Title" type="text" formControlName="title" name="title" required>
            <mat-error *ngIf="requestForm.get('title').hasError('required')">Title is required</mat-error>
          </mat-form-field>
        </p>
        <p>
          <mat-form-field class="form-field-width">
            <input matInput placeholder="Select Category" type="number" formControlName="category" name="category" required>
            <mat-error *ngIf="requestForm.get('category').hasError('required')">Category is required</mat-error>
          </mat-form-field>
        </p>
        <p>
          <mat-form-field class="form-field-width">
            <input matInput placeholder="Description" type="test" formControlName="description" name="description"
              required>
            <mat-error *ngIf="requestForm.get('description').hasError('required')">Description is required</mat-error>
          </mat-form-field>
        </p>
        <p>
          <mat-form-field class="form-field-width">
            <input matInput placeholder="Quantity" type="number" formControlName="quantity" name="quantity" required>
            <mat-error *ngIf="requestForm.get('quantity').hasError('required')">Quantity is required</mat-error>
            <mat-error *ngIf="requestForm.get('quantity').hasError('pattern')">Please enter numbers only</mat-error>
          </mat-form-field>
        </p>
        <button type="submit" [disabled]="requestForm.invalid" mat-raised-button color="primary">Submit</button>
      </form>

这是 sample-request.component.ts 文件。

export class SampleRequestComponent implements OnInit {

  requestForm: FormGroup;
  sampleRequest: SampleRequest;


  constructor(private fb: FormBuilder, private userService: UserService, private tokenStorage: TokenStorageService) { }

  ngOnInit() {
    this.requestForm = this.fb.group({
      title : ['', Validators.required],
      category : [''],
      description: ['', Validators.required],
      quantity: ['', [Validators.required, Validators.pattern]]
    });
   }


  onSubmit() {
    this.sampleRequest.title = this.requestForm.get('title').value;
    this.sampleRequest.category.id = this.requestForm.get('category').value;
    this.sampleRequest.user.id = this.tokenStorage.getUser().id;
    this.sampleRequest.description = this.requestForm.get('description').value;
    this.sampleRequest.quantity = this.requestForm.get('quantity').value;
    console.log(this.sampleRequest);
    this.userService.newSampleRequest(this.sampleRequest)
      .subscribe(
        data => {
          this.isSuccessful = true;
          this.isProgress = true;
        },
        error => {
          this.isFailed = true;
          this.isProgress = true;
          this.errMsg = error.error.message;
        }
      );

  }

}

而且我还收到“标题”未定义的错误。

标签： angulartypescriptangular-reactive-forms

解决方案

正如您所提到的，您正在导出的 SampleRequest 在这里是未定义的

export class SampleRequest {
  title: string;
  user: { id: number};
  category: { id: number};
  description: string;
  quantity: number;
}

这是一个你需要初始化的类

sampleRequest: SampleRequest = new SampleRequest();

通过这种方式，您将在 this.sampleRequest 中获得所有示例请求属性

推荐阅读