5
votes

Angular 7: Build Prod Error: la propriété 'value' n'existe pas sur le type 'Component'

Je crée une entrée de recherche. cela, saisissez également l'icône d'effacement.

Cette erreur n'est mise en cache que pour ng build --prod

L'erreur est

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

Dans mon code HTML

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

pourquoi cette erreur s'affiche sur --prod?

typescript angular

2 commentaires

Pouvons-nous voir votre fichier ts? Où vous initialisez «la valeur».

L'indicateur --prod est plus restreint lors de la construction du packge. Ainsi, il vérifie également si toutes les propriétés de composant utilisées dans le modèle existent ou non.

3 Réponses :

10
votes

Dans le composant, créez une propriété avec une valeur de nom. La construction de production essaie également de trouver des propriétés qui ne sont pas déclarées mais utilisées dans le modèle (car la compilation ne peut pas détecter cette erreur), alors pourquoi elle génère une erreur.

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

2 commentaires

Cela signifie que nous allons définir la propriété pour tous les champs que nous mentionnerons dans le formulaire ??

Cela dépend de la façon dont vous les avez définis. Pour plus de champs, il existe une solution avec ReactiveForms

0
votes

Ajoutez simplement la propriété value dans SidebarComponent comme le suggère la CLI. Comme ci-dessous

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

0 commentaires

0
votes

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

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

lorsque vous créez une application par AOT. Il met en évidence toutes les erreurs de modèle HTML avant de compiler l'application. chaque propriété du modèle doit être définie explicitement dans le composant. donc le testeur effectué par AOT connaîtra le type de données exact de la propriété ...

0 commentaires