Angular 6: TypeError: Невозможно прочитать свойство 'значение' из неопределенного

Question

Я создаю простую форму для отправки данных, адреса электронной почты, названия города и отеля, когда я нажимаю кнопку «Отправить», я получаю эту ошибку:

AboutComponent.html: 79 ОШИБКА TypeError: Невозможно прочитать свойство 'value' из неопределенного

Вот что у меня есть: comment.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);

component.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);
  }

Примечание: когда я удаляю имя, все работает нормально, но мне нужно также добавить название города и название отеля в мою базу данных вместе с электронной почтой.

что не так с моим кодом?

Answer 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 должно быть уникальным для каждого элемента select. Вы не можете использовать одну и ту же переменную для двух разных элементов.

См. Имя здесь:

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>

Дайте мне знать, если это поможет!