未定义标识符“必需”。 '__type' 不包含这样的成员

Posted 2023-02-19

【中文标题】未定义标识符“必需”。 \'__type\' 不包含这样的成员

【英文标题】：Identifier 'required' is not defined. '__type' does not contain such a member未定义标识符“必需”。 '__type' 不包含这样的成员

【发布时间】：2018-05-08 01:24:20

【问题描述】：

我需要声明这个变量来输入任何类型吗？这显示在我的 html 模板的可视化代码编辑器中。

product-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>

product-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。我能够通过将对象声明为“任何”来修复对象

如果可能的话，我有兴趣学习如何为此设置界面。

【问题讨论】：

除了any，我们在任何地方都看不到您尝试过的内容。如果您可以创建一个展示此错误的堆栈闪电战，那也很棒:)

【参考方案1】：

角度有一个错误。如果您像这样编写 *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 Code 也有同样的问题。我只在条件之前使用!! 解决了它。

试试：

<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

【讨论】：

非常好的答案谢谢，我有同样的问题 !!name?.errors?.maxlength 没有定义 maxlength show Identifier 'maxlength'。 '__type' 在 VS Code 中不包含这样的成员。在浏览器上运行有问题的代码后，它没有显示任何错误，但 maxlength 不起作用意味着：p class="form-control-feedback-text" *ngIf="name.errors?.maxlength && ( name.dirty | | name.touched)">名称不能超过 50 个字符。 当我使用 !!然后是它的工作“问题是TS还是任何其他问题”。

【参考方案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】：

尝试使用ngFor 访问视图上的FormGroup 内的FormArray 控件时遇到类似错误。

此问题的某些答案部分起作用，导致编译错误或项目构建失败。例如：

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>

【讨论】：

@Ram Ghadiyaram 是的，当然......我的荣幸......它代表可空属性，因为它第一次可能为空，因此您必须以这种方式处理它......谢谢

【参考方案8】：

我遇到了同样的问题，感谢 António César Júnior 的回答，您解决了：

https://***.com/a/53403416/8992452 仅使用

   !!

<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>

【参考方案10】：

docs 中似乎确实提到了一些问题：

有时绑定表达式会在 AOT 编译期间触发类型错误，并且不可能或难以完全指定类型。要消除错误，您可以使用 $any() 转换函数将表达式转换为任何类型，如下例所示

所以你可以这样做：

$any(price.errors).required