Question

我正在创建一个搜索输入。还要在清除图标上输入。

此错误仅针对ng build --prod

进行了缓存

错误是

ERROR in src\app\menu\sidebar\sidebar.component.html(4,88): : Property 'value' does not exist on type 'SidebarComponent'.
src\app\menu\sidebar\sidebar.component.html(5,28): : Property 'value' does not exist on type 'SidebarComponent'.
src\app\menu\sidebar\sidebar.component.html(4,88): : Property 'value' does not exist on type 'SidebarComponent'.

在我的HTML代码中

<h4 class="col my-2">Application List</h4>

<mat-form-field class="col">                
        <input class="search" matInput type="text"  placeholder="Search" [(ngModel)]="value" ><!--This is search input-->
        <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
          <mat-icon>close</mat-icon>
        </button>
</mat-form-field>

<mat-list *ngFor="let app of applist" class="applist" #applist>    

            <a mat-list-item routerLink="." routerLinkActive="active">
                <mat-icon color="primary" class="mr-1">album</mat-icon>
                {{app}}
            </a>

    </mat-list>

为什么此错误显示在--prod上？

Answer 1

在组件中创建一个具有名称值的属性。生产版本还会尝试查找未声明但在模板中使用过的属性（因为编译无法捕获此错误），因此为什么会引发错误。

@Component({
   ...
})
export class SideBarComponent {
   ...
   value: any;
   ...
}

Answer 2

只需按照CLI的建议在SidebarComponent中添加 value 属性即可。像下面一样

@Component({
  selector: 'app-sidebar',
  template: `
    app-sidebar.component.html
  `
})
  export class SidebarComponent {
    value: string = '';
}

Answer 3

// component.ts


export class ProductFormComponent implements OnInit {
  categories$: Observable<any>;
  id: string;
  product: any = {};   //type of product should be any or proper interface of product so then compiler will know the type of value property...
  title: any;
}

// HTML Template......

<form #f="ngForm" (ngSubmit)="save(f.value)">
            <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel" [(ngModel)]="product.value" 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>
</form>

通过AOT构建应用程序时。在编译应用程序之前，它将突出显示所有HTML模板错误。模板中的每个属性都应在组件中显式定义。因此由AOT执行的测试人员将知道属性的确切数据类型...

Angular 7：构建产品错误：类型“组件”上不存在属性“值”

3 个答案: