Идентификатор "требуется" не определен. "__type" не содержит такого члена

Мне нужно объявить эту переменную, чтобы ввести любой? Это отображается в моем редакторе визуального кода в моем HTML-шаблоне.

enter image description here

продукт-form.component.html

<div class="row">

  <div class="col-md-6">
      <form #form="ngForm" (ngSubmit)="save(form.value)">

            <div class="form-group">
              <label for="title">Title</label>
              <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
              <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                Title is required.
              </div>
            </div>

            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input #price="ngModel" ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0">
                </div>
                <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                  <div *ngIf="price.errors.required">Price is required.</div>
                  <div *ngIf="price.errors.min">Price should be 0 or higher.</div>
                </div>
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" ngModel [(ngModel)]="product.category" name="category" id="category" class="form-control" required>
                  <option value=""></option>
                  <option *ngFor="let category of categories$ | async" [value]="category.key">{{ category.payload.val().name }}</option>
                </select>
                <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
                  Category is required.
                </div>
            </div>

            <div class="form-group">
                <label for="imageUrl">Image URL</label>
                <input #imageUrl="ngModel" ngModel [(ngModel)]="product.imageUrl" name="imageUrl" id="imageUrl" type="text" class="form-control" required url>
                <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
                  <div *ngIf="imageUrl.errors.required">Image URL is required.</div>
                  <div *ngIf="imageUrl.errors.url">Please enter a valid URL.</div>
                </div>
            </div>

            <button class="btn btn-primary">Save</button>

          </form>
  </div>

  <div class="col-md-6">
      <div class="card" style="width: 20rem;">
          <img class="card-img-top" [src]="product.imageUrl" *ngIf="product.imageUrl">
          <div class="card-block">
            <h4 class="card-title">{{ product.title }}</h4>
            <p class="card-text">{{ product.price | currency: 'USD': symbol }}</p>
          </div>
        </div>
  </div>

</div>

продакт-form.component.ts

import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../../category.service';
import { ProductService } from '../../product.service';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/take';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {

  categories$;
  product: any = {};

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService) {
    this.categories$ = categoryService.getCategories();

    let id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.productService.get(id).take(1).subscribe(p => this.product = p);
    }
  }

  save(product) {
    this.productService.create(product);
    this.router.navigate(['/admin/products']);
  }

  ngOnInit() {
  }

}

Как мне удалить эту ошибку? Функциональность в приложении, кажется, не осуществляется. Итак, из того, что я понимаю, это компилируется в действительный JS. Я смог исправить объекты, объявив его как "любой"

Мне было бы интересно узнать, как настроить интерфейс для этого, если это возможно.

Ответ 1

В angular есть ошибка. Эта ошибка компилятора исчезнет, ​​если вы напишете, что * ngIf вот так:

          <div *ngIf="price.errors['required']">

Ответ 2

попробуйте добавить "?" после "цены".

Вот так:

<div *ngIf="price?.errors.required">Price is required.</div>
<div *ngIf="price?.errors.min">Price should be 0 or higher.</div>

Ответ 3

У меня была такая же проблема с моим кодом VS. Я решил это только с помощью !! перед условием.

Попробуйте:

<div *ngIf="!!price.errors.required">Price is required.</div>
<div *ngIf="!!price.errors.min">Price should be 0 or higher.</div>

Дополнительная информация: https://github.com/angular/vscode-ng-language-service/issues/126

Ответ 4

<div class="alert alert-danger" *ngIf="email.touched && !email.valid">
     <div *ngIf="email.errors['required']">Email is required</div>
     <div *ngIf="email.errors['minlength']">Email should be minimum {{ email.errors['minlength']['requiredLength'] }} characters</div>
     <div *ngIf="email.errors['maxlength']">Email should be maximum {{ email.errors['maxlength']['requiredLength'] }} characters</div>
     <div *ngIf="email.errors['pattern']">Email doesn't match the pattern.</div>
</div>

Ответ 5

Была похожая ошибка при попытке доступа к FormArray управления FormArray внутри FormGroup в представлении с использованием ngFor.

Некоторые ответы на этот вопрос работали частично, вызывая либо ошибки компиляции, либо сбой сборки проекта. Например:

libraryForm.get('books') //compile error
libraryForm.controls['books'].controls' //build failure

Пока у меня работает только нижеприведенное решение:

libraryForm['controls']['books']['controls']

весь элемент:

<div [formGroupName]="i" *ngFor="let book of libraryForm['controls']['books']['controls'];let i = index">

Ответ 6

Использование hasError() вместо свойства errors исправляет это для меня.
Используйте это так:

 <div *ngIf="price.hasError('required')">Price is required.</div>

Ответ 7

Вы можете просто добавить знак вопроса перед вашей собственностью

  <label [attr.data-error]="Password.errors!=null?(Password?.errors.Required?'Required 
  field!':'Minimum 3 Characters Needed'):''">Password</label>

Ответ 8

У меня была та же проблема, которую вы решили благодаря ответу Антонио Сезара Жуниора:

fooobar.com/questions/1689764/...  используя только

   !!

<div *ngIf="submitted && f.username.errors">
    <p *ngIf="f.username.errors.required">Email is required</p>
    <p *ngIf="f.username.errors.email">The mail address is invalid</p>
</div>

работал в предыдущем проекте, затем изменился на:

 <div *ngIf="submitted && !!f.username.errors">
   <p *ngIf="!!f.username.errors.required">Email is required</p>
   <p *ngIf="!!f.username.errors.email">The mail address is invalid</p>
 </div>

Ответ 9

Пожалуйста, проверьте с этим решением (у меня хорошо работает)!

<div class="alert alert-danger" *ngIf="username.touched && username.invalid">
  <div *ngIf="username.errors['required']">Username are required!</div>
  <div *ngIf="username.errors['minlength']">Username should be minimum {{ username.errors['minlength'].requiredLength }} characters!</div>
  <div *ngIf="username.errors['cannotContainSpace']">Username cannot contains spaces!</div>
</div>