ionic2：动态附加或设置离子输入名称？

时间：2016-12-13 06:29:25

标签： angular ionic2

我想添加一个副本，就像这样。

<button ion-button="addFriend()">add</button>
<ion-input [(ngModel)]="friend[0]" type="text">Friend</ion-input>

调用addFriend（）

之后 
<button ion-button="addFriend()">add</button>
<ion-input [(ngModel)]="friend[0]" type="text">Friend</ion-input>
<ion-input [(ngModel)]="friend[1]" type="text">Friend</ion-input>

我尝试设置离子输入名称，就像这样。

<ion-list *ngIf="data">
    <ion-item *ngFor="let column of data.column">
      <ion-label class="column-label" wrap>{{column.columnName}}</ion-label>
      <ion-input name="columnId[{{column.cid}}]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == 'text' || column.columnType == 'tel'"></ion-input>
    </ion-item>
  </ion-list>

但抛出错误...... 

Unhandled Promise rejection: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("l" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
      <ion-input [ERROR ->]name="columnId[{{column.cid}}]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == "): TablePage@18:17 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("l" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
      <ion-input [ERROR ->]name="columnId[{{column.cid}}]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == "): TablePage@18:17
    at TemplateParser.parse (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/template_parser/template_parser.js:131:19)
    at RuntimeCompiler._compileTemplate (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:282:51)
    at eval (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:83)
    at Set.forEach (native)
    at compile (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:47)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:13422)
    at e.run (http://localhost:8100/build/polyfills.js:3:10809)
    at http://localhost:8100/build/polyfills.js:3:8911
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14051)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:11411) Error: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("l" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
      <ion-input [ERROR ->]name="columnId[{{column.cid}}]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == "): TablePage@18:17
    at TemplateParser.parse (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/template_parser/template_parser.js:131:19)
    at RuntimeCompiler._compileTemplate (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:282:51)
    at eval (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:83)
    at Set.forEach (native)
    at compile (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:47)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:13422)
    at e.run (http://localhost:8100/build/polyfills.js:3:10809)
    at http://localhost:8100/build/polyfills.js:3:8911
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14051)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:11411)

4 个答案:

答案 0 :(得分：3)

<ion-list *ngIf="data">
    <ion-item *ngFor="let column of data.column">
      <ion-label class="column-label" wrap>{{column.columnName}}</ion-label>
      <ion-input [name]="'columnId['+column.cid+']'" [type]="column.columnType" clearOnEdit *ngIf="column.columnType == 'text' || column.columnType == 'tel'"></ion-input>
    </ion-item>
  </ion-list>

使用使用angular或typescript创建的变量绑定到name和type，您必须使用[name]和[type]。

这将输出：

<ion-input name="columnId[9]" type="text" clearOnEdit>

另见这个plunker：

https://plnkr.co/edit/tAQrHQHpNj8RvymxOBkF?p=preview

除非您想使用名为columnId的数组的值

答案 1 :(得分：0)

{{}}不用于属性。 试试这个 - 

<ion-list *ngIf="data">
    <ion-item *ngFor="let column of data.column">
      <ion-label class="column-label" wrap>{{column.columnName}}</ion-label>
      <ion-input name="columnId[column.cid]" type="column.columnType" clearOnEdit *ngIf="column.columnType == 'text' || column.columnType == 'tel'"></ion-input>
    </ion-item>
  </ion-list>

答案 2 :(得分：0)

<ion-list *ngIf="data">
    <ion-item *ngFor="let column of data.column">
      <ion-label class="column-label" wrap>{{column.columnName}}</ion-label>
      <ion-input name="columnId[column.cid]" type="column.columnType" clearOnEdit *ngIf="column.columnType == 'text' || column.columnType == 'tel'"></ion-input>
    </ion-item>
  </ion-list>

抛出错误

 Unhandled Promise rejection: Template parse errors:
    Can't bind to 'name' since it isn't a known property of 'ion-input'.
    1. If 'ion-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
    2. If 'ion-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
     ("l" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
          <ion-input [ERROR ->][name]="columnId[column.cid]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == 't"): TablePage@18:17 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
    Can't bind to 'name' since it isn't a known property of 'ion-input'.
    1. If 'ion-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
    2. If 'ion-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
     ("l" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
          <ion-input [ERROR ->][name]="columnId[column.cid]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == 't"): TablePage@18:17
        at TemplateParser.parse (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/template_parser/template_parser.js:131:19)
        at RuntimeCompiler._compileTemplate (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:282:51)
        at eval (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:83)
        at Set.forEach (native)
        at compile (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:47)
        at t.invoke (http://localhost:8100/build/polyfills.js:3:13422)
        at e.run (http://localhost:8100/build/polyfills.js:3:10809)
        at http://localhost:8100/build/polyfills.js:3:8911
        at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14051)
        at e.runTask (http://localhost:8100/build/polyfills.js:3:11411) Error: Template parse errors:
    Can't bind to 'name' since it isn't a known property of 'ion-input'.
    1. If 'ion-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
    2. If 'ion-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
     ("l" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
          <ion-input [ERROR ->][name]="columnId[column.cid]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == 't"): TablePage@18:17
        at TemplateParser.parse (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/template_parser/template_parser.js:131:19)
        at RuntimeCompiler._compileTemplate (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:282:51)
        at eval (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:83)
        at Set.forEach (native)
        at compile (/Users/vancy/ionic/tongzhanbu/node_modules/@angular/compiler/src/runtime_compiler.js:187:47)
        at t.invoke (http://localhost:8100/build/polyfills.js:3:13422)
        at e.run (http://localhost:8100/build/polyfills.js:3:10809)
        at http://localhost:8100/build/polyfills.js:3:8911
        at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14051)
        at e.runTask (http://localhost:8100/build/polyfills.js:3:11411)
    o @ polyfills.js:3
    r @ polyfills.js:3
    i @ polyfills.js:3
    polyfills.js:3 Error: Uncaught (in promise): Error: Template parse errors:
    Can't bind to 'name' since it isn't a known property of 'ion-input'.
    1. If 'ion-input' is an Angular component and it has 'name' input, then verify that it is part of this module.
    2. If 'ion-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
     ("l" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
          <ion-input [ERROR ->][name]="columnId[column.cid]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == 't"): TablePage@18:17
        at s (polyfills.js:3)
        at s (polyfills.js:3)
        at polyfills.js:3
        at t.invokeTask (polyfills.js:3)
        at e.runTask (polyfills.js:3)
        at i (polyfills.js:3)

答案 3 :(得分：0)

<ion-item *ngFor="let column of data.column">
      <ion-label class="column-label" wrap *ngIf="column.columnType != 'tableLine'">{{column.columnName}}</ion-label>
      <ion-input name="columnId[column.cid]" type="{{column.columnType}}" clearOnEdit *ngIf="column.columnType == 'text' || column.columnType == 'tel'"></ion-input>
    </ion-item>

输出

<ion-input clearonedit="" name="columnId[column.cid]" class="input input-ios" ng-reflect-type="text">
<input class="text-input text-input-ios ng-untouched ng-pristine ng-valid" clearonedit="" name="columnId[column.cid]" autocomplete="off" autocorrect="off" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-ios" ng-reflect-type="text" type="text" placeholder="">
<!--template bindings={
  "ng-reflect-ng-if": null
}--><button class="text-input-clear-icon disable-hover button button-ios button-clear button-clear-ios" clear="" ion-button="" type="button" ng-reflect-hidden="true" hidden=""><span class="button-inner"></span><div class="button-effect"></div></button><!--template bindings={
  "ng-reflect-ng-if": null
}-->
</ion-input>
相关问题
最新问题