Angular2/Nativescript：嵌套 StackLayouts 时出现奇怪的 "Unexpected tag" 错误

Question

我正忙于一个 Angular2 Nativescript 应用程序，它之前工作得很好，但在将输入字段移动到我视图的另一部分后，我收到以下错误消息，说意外的结束标记 "StackLayout"...知道什么可能导致这个？可以相互嵌套的堆栈布局的数量是否有限制？我移动到视图不同部分的输入字段是数量输入字段...

我得到的错误：

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.

这是我的组件 HTML 代码：

<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

我在以下行中遇到了相同的错误，导致使用字体真棒时出现错误

nt-awesome" text="&#xf1f8;

并尝试使用以下方法解决它：fonticon-nativescript angular

Answer 2

这是您的问题：

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

您忘记了结束标记 </TextField> 下一个结束标记是 /StackLayout，它会抛出错误，因为它与它之前的 TextField 不匹配。

Angular2/Nativescript：嵌套 StackLayouts 时出现奇怪的 "Unexpected tag" 错误

Angular2/Nativescript: Strange "Unexpected tag" error when nesting StackLayouts

nativescript

angular2-nativescript