Angular2/Nativescript: Seltsame Fehlermeldung "Unerwarteter Tag" beim Verschachteln von StackLayouts

Question

Ich bin beschäftigt mit einer Angular2 Nativescript-App, die einwandfrei funktioniert, aber nachdem ich ein Eingabefeld in einen anderen Teil meiner Ansicht verschoben habe, bekomme ich die folgenden Fehler: Unerwartetes schließendes Tag "StackLayout" ... Irgendeine Idee was könnte das verursachen? Gibt es eine Begrenzung für die Anzahl der Stack-Layouts, die ineinander verschachtelt werden können? Das Eingabefeld I in einen anderen Teil der Ansicht bewegt ist die Menge Eingabefeld ...

Der Fehler erhalte ich:

JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR 
JS: ns-renderer: Template parse errors: 
JS: Unexpected closing tag "StackLayout" ("Field class="input input-border" hint="Enter Quantity" keyboardType="number" [(ngModel)]="qty"> 
JS:        [ERROR ->]</StackLayout> 
JS:        <Button class="btn btn-primary pull-right font-awesome" text="&#xf058; Capture" ("): StockTakeComponent@37:4 
JS: Unexpected closing tag "StackLayout" ("me" text="&#xf058; Capture" (tap)="capture()" [isEnabled]="qty !== '' && qty != null"></Button> 
JS:      [ERROR ->]</StackLayout> 
JS:    </StackLayout> 
JS: 
JS: "): StockTakeComponent@39:3 
JS: Unexpected closing tag "StackLayout" ("; Capture" (tap)="capture()" [isEnabled]="qty !== '' && qty != null"></Button> 
JS:      </StackLayout> 
JS:    [ERROR ->]</StackLayout> 
JS: 
JS:    <StackLayout *ngFor="let item of stockTakeDetailList" *ngIf="stockTakeDetailList.l"): StockTakeComponent@40:2 
JS: Unexpected closing tag "StackLayout" ("nt-awesome" text="&#xf1f8; remove" (tap)="removeCaptureItem(item.IDKey)"></Button> 
JS:  </StackLayout> 
JS:  [ERROR ->]</StackLayout> 
JS: </StackLayout>"): StockTakeComponent@47:1 
JS: Unexpected closing tag "StackLayout" (" 
JS:  </StackLayout> 
JS:  </StackLayout> 
JS: [ERROR ->]</StackLayout>"): StockTakeComponent@48:0 
JS: 
JS: Error: Template parse errors: 
JS: Unexpected closing tag "StackLayout" ("Field class="input input-border" hint="Enter Quantity" keyboardType="number" [(ngModel)]="qty"> 
JS:        [ERROR ->]</StackLayout> 
JS:        <Button class="btn btn-primary pull-right font-awesome" text="&#xf058; Capture" ("): StockTakeComponent@37:4 
JS: Unexpected closing tag "StackLayout" ("me" text="&#xf058; Capture" (tap)="capture()" [isEnabled]="qty !== '' && qty != null"></Button> 
JS:      [ERROR ->]</StackLayout> 
JS:    </StackLayout> 
JS: 
JS: "): StockTakeComponent@39:3 
JS: Unexpected closing tag "StackLayout" ("; Capture" (tap)="capture()" [isEnabled]="qty !== '' && qty != null"></Button> 
JS:      </StackLayout> 
JS:    [ERROR ->]</StackLayout> 
JS: 
JS:    <StackLayout *ngFor="let item of stockTakeDetailList" *ngIf="stockTakeDetailList.l"): StockTakeComponent@40:2 
JS: Unexpected closing tag "StackLayout" ("nt-awesome" text="&#xf1f8; remove" (tap)="removeCaptureItem(item.IDKey)"></Button> 
JS:  </StackLayout> 
JS:  [ERROR ->]</StackLayout> 
JS: </StackLayout>"): StockTakeComponent@47:1 
JS: Unexpected closing tag "StackLayout" (" 
JS:  </StackLayout> 
JS:  </StackLayout> 
JS: [ERROR ->]</StackLayout>"): StockTakeComponent@48:0 
JS:  at DirectiveNormalizer.normalizeLoadedTemplate (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:13337:21) 
JS:  at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:13324:53 
JS:  at ZoneDelegate.invoke (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:190:28) 
JS:  at Zone.run (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:83:43) 
JS:  at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:449:57 
JS:  at ZoneDelegate.invokeTask (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:223:37) 
JS:  at Zone.runTask (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:123:47) 
JS:  at drainMicroTaskQueue (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:355:35) 
1:54:21 PM - Compilation complete. Watching for file changes. 

Und hier ist meine Komponente HTML-Code:

<StackLayout class="page"> 
    <ActionBar title="Stock Take" android.icon="res://icon" android.iconVisibility="always"></ActionBar> 
    <StackLayout *ngIf="!stockTaking"> 
     <Label class="h1 title m-x-auto" text="Begin Stock Take?"></Label> 
     <StackLayout class="form"> 
      <StackLayout class="input-field">    
       <ListView [items]="activeStockTakes" class="list-group" (itemTap)="selectActiveStockTake($event.target.value)"> 
       <template let-activeStockTake="item"> 
       <StackLayout> 
        <Label class="list-group-item" [text]="activeStockTake.UserCode + ' - ' + activeStockTake.Comment"></Label> 
       </StackLayout> 
       </template> 
       </ListView> 
       <TextField class="input input-border tf" hint="Enter Sheet Number" placeholderColor="white" [(ngModel)]="sheetNo"></TextField> 
       <TextField class="input input-border" hint="Enter Bin Number" [(ngModel)]="binNo"></TextField>   
      </StackLayout> 
      <Button class="btn btn-primary font-awesome" text="&#xf04b; Start Stock Take" (tap)="startStockTake()" [isEnabled]="sheetNo !== '' && sheetNo != null && binNo !== '' && binNo != null"></Button> 
     </StackLayout> 
    </StackLayout> 
    <StackLayout *ngIf="stockTaking"> 
     <StackLayout class="form"> 
      <Button id="endStockTakeBtn" class="btn pull-right font-awesome" text="&#xf00d; End Stock Take" (tap)="endStockTake()"></Button> 
      <StackLayout class="input-field">  
       <TextField class="input input-border" hint="Enter Barcode" keyboardType="number" [(ngModel)]="barcode"></TextField>  
      </StackLayout> 

      <Button class="btn btn-primary pull-right" text="Scan" (tap)="scan()" [isEnabled]="barcode !== '' && barcode != null"></Button> 

     </StackLayout> 
     <StackLayout *ngIf="product" class="m-x-auto"> 
      <Label class="label text-primary" [text]="'Description: ' + product.Description"></Label> 
      <Label class="label text-primary" [text]="'POS Description: ' + product.POSDescription"></Label> 
      <Label class="label text-primary" [text]="'POS price: R' + product.POSPrice"></Label> 
      <Label class="label text-primary" [text]="'Stock On Hand: ' + product.StockOnHand"></Label> 
      <StackLayout class="form"> 
       <StackLayout class="input-field"> 
        <TextField class="input input-border" hint="Enter Quantity" keyboardType="number" [(ngModel)]="qty"> 
       </StackLayout>    
       <Button class="btn btn-primary pull-right font-awesome" text="&#xf058; Capture" (tap)="capture()" [isEnabled]="qty !== '' && qty != null"></Button> 
      </StackLayout> 
     </StackLayout> 

     <StackLayout *ngFor="let item of stockTakeDetailList" *ngIf="stockTakeDetailList.length > 0"> 
      <Label [text]="'Name: ' + item.ProductDetail_Name" class="text-primary"></Label>    
      <Label text="'Qty: ' + item.Qty" class="text-primary"></Label>   
      <Button class="btn btn-primary pull-left font-awesome" text="&#xf1f8; remove" (tap)="removeCaptureItem(item.IDKey)"></Button> 
    </StackLayout> 
    </StackLayout> 
</StackLayout> 

Answer 1

Hier ist Ihr Problem:

<StackLayout class="input-field"> 
     <TextField class="input input-border" hint="Enter Quantity" keyboardType="number" [(ngModel)]="qty"> 
</StackLayout> 

Sie haben vergessen, das Schließen </TextField> Der nächste schließende Tag ist die /StackLayout, die es auf den Fehler zu werfen, weil es nicht die TextField, bevor es übereinstimmt.

Answer 2

erhielt ich den gleichen Fehler inn diese folgende Zeile den Fehler verursachen, wenn Schriftart ehrfürchtige

nt-awesome" text=" 

und versuchen sie lösen es u singen: fonticon-nativescript angular