typescript - Angular 7: Lỗi Build Prod: Thuộc tính 'value' không tồn tại trên loại 'Component'

Tôi đang tạo một ô tìm kiếm. Ô đó cũng có biểu tượng xóa.

Lỗi này chỉ được lưu vào bộ nhớ đệm cho ng build --prod

Lỗi là

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

Trong mã HTML của tôi

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

tại sao lỗi này hiển thị trên --prod?

Câu trả lời #1

Trong component, tạo một thuộc tính với tên value. Bản build sản xuất cũng cố gắng tìm các thuộc tính không được khai báo nhưng được sử dụng trong template (vì biên dịch không thể bắt lỗi này), vậy tại sao nó lại ném ra lỗi.

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

Câu trả lời #2

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

khi bạn xây dựng một ứng dụng bằng AOT. Nó làm nổi bật tất cả các lỗi trong mẫu HTML trước khi biên dịch ứng dụng. mọi thuộc tính trong mẫu nên được định nghĩa rõ ràng trong thành phần một cách rõ ràng. vì vậy trình kiểm tra do AOT thực hiện sẽ biết chính xác kiểu dữ liệu của thuộc tính...