Angular 6：TypeError：无法读取未定义的属性“值”

Posted 2023-03-13

【中文标题】Angular 6：TypeError：无法读取未定义的属性“值”

【英文标题】：Angular 6: TypeError: Cannot read property 'value' of undefined

【发布时间】：2018-12-13 09:29:38

【问题描述】：

我正在创建一个简单的表单来提交数据、电子邮件、城市名称和酒店名称，当我点击提交时出现此错误：

AboutComponent.html:79 错误类型错误：无法读取属性“值” 未定义的

这是我所拥有的： 评论.js

// Comments Schema

const CommentsSchema = mongoose.Schema(

  email: 
    type: String,
    required: true
  ,
  name: 
    type: String,
    required: true
  
,
    collection: 'comments'
);

const Comments = module.exports = mongoose.model('Comments', CommentsSchema);

组件.ts

addReview(email, name) 
    this.moviesService.addReview(email, name).subscribe(success => 
      this.flashMessages.show('You are data we succesfully submitted',  cssClass: 'alert-success', timeout: 3000 );
      // get the id
      this.activeRouter.params.subscribe((params) => 
        // tslint:disable-next-line:prefer-const
        let id = params['id'];
        this.moviesService.getComments(id)
          .subscribe(comments => 
            console.log(comments);
            this.comments = comments;
          );
      );
    , error => 
      this.flashMessages.show('Something went wrong',  cssClass: 'alert-danger', timeout: 3000 );
    );
  

html

<form [formGroup]="angForm" class="form-element">
          <div class="form-group form-element_email">
            <input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
            </div>
            <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
                class="alert alert-danger">
                <div *ngIf="angForm.controls['email'].errors.required">
                  Email is required.
                </div>
              </div>
        <div class="input-group mb-3 form-element_city">
          <select class="custom-select" id="inputGroupSelect01">
            <option selected *ngFor="let city of cities" [ngValue]="city.name" #name>city.name</option>

          </select>
        </div>
        <div class="input-group mb-3 form-element_hotel">
            <select class="custom-select" id="inputGroupSelect01">
              <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name" #name>hotel.name</option>

            </select>
          </div>
          <div class="form-group">
              <button type="submit" (click)="addReview(email.value, name.value)" class="btn btn-primary btn-block form-element_btn" [disabled]="!validEmail">ACCEDER</button>
            </div>
      </form>

service.ts

 addReview(email, name): Observable<any> 
    const uri = `$apiUrl + this.addCommentsUrl`;
    const obj = 
      email: email,
      name: name
    ;
    return this.http.post(uri, obj);
  

注意：当我删除名称时，一切正常，但我还需要将城市名称和酒店名称与电子邮件一起插入到我的数据库中。

我的代码有什么问题？

【参考方案1】：

我认为 templateRef var 应该在 select 元素而不是 option 元素上。

改为这个

<option selected *ngFor="let city of cities" [ngValue]="city.name" #name>city.name</option>

你可以试试这个：

<select class="custom-select" id="inputGroupSelect01">

附带说明 templateRef 变量名称对于每个选择元素应该是唯一的。您不能对两个不同的元素使用相同的变量。

在此处查看#name：

1. <option selected *ngFor="let city of cities" [ngValue]="city.name" #name>city.name</option>

2. <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name" #name>hotel.name</option>

如果有帮助，请告诉我！

【讨论】：

Hii 在将 templateRef 变量更改为选择后我得到错误：Request URL: http://localhost:8000/movies/comments Request Method: POST Status Code: 400 Bad Request

那是您的 API 服务器抱怨发布的数据。确保您的网页将所需数据发布到该端点。在请求期间放置几个日志语句以查看发生了什么。如果对您有帮助，也请点赞或接受答案。

它有点帮助，调试后我看到 email ="provided email" 和 name="" ； （名称为空）在断点上，那么我需要更改什么？

不确定您的情况可能有什么问题。不看完整代码就不能说太多。

这样的事情怎么样？ (click)="addReview(email.value, select1.value || select2.value)"