Question

某些ng绑定在对象中显示为空白。我的一些输入需要ngStandAlone，表单使用星级自定义组件。表单输入在对象中单独定义为空字符串，但文本区域不绑定到这些定义，因为它们在模拟器中显示“NaN”。

[已修复：无法在ng绑定中使用破折号 - 替换为下划线以修复问题]

在组件中：

remark: any;

constructor() {

      this.remark = {
                'problem': '',
                'problem-comments': '',
                'easy-to-use': '',
                'information-good': '',
                'recommend-app': '',
                'improvement-comments': '',
                'name': '',
                'email': ''
            };
}

在模板（html）中：

<form (ngSubmit)="submitForm()">
    <ion-label>Please select one</ion-label>
    <ion-list radio-group [(ngModel)]="remark.problem" [ngModelOptions]="{standalone: true}">
        <ion-item>
            <ion-label class="small-text">Scenic location was not correct</ion-label>
            <ion-radio value="scenic"></ion-radio>
        </ion-item>
        <ion-item>
            <ion-label class="small-text">The shopping was not a good experience as service was poor</ion-label>
            <ion-radio value="shopping"></ion-radio>
        </ion-item>
        <ion-item>
            <ion-label class="small-text">Food quality was poor</ion-label>
            <ion-radio value="food"></ion-radio>
        </ion-item>

        <ion-item>
            <ion-label stacked>Problem Comments</ion-label>
            <ion-textarea [(ngModel)]="remark.problem-comments" [ngModelOptions]="{standalone: true}" placeholder="Write your comment here"></ion-textarea>
        </ion-item>

    </ion-list>

    <ion-label>Please rate to help us improve Application.</ion-label>

    <ion-label class="small-text">Was easy to use</ion-label>
    <rating [(ngModel)]="remark.easy-to-use" [ngModelOptions]="{standalone: true}"></rating>

    <ion-label class="small-text">Information on opening was good</ion-label>
    <rating [(ngModel)]="remark.information-good" [ngModelOptions]="{standalone: true}"></rating>

    <ion-label class="small-text">Recommend Application to other people</ion-label>
    <rating [(ngModel)]="remark.recommend-app" [ngModelOptions]="{standalone: true}"></rating>

    <ion-label class="small-text">Improvement Comments</ion-label>
    <ion-textarea [(ngModel)]="remark.improvement-comments" [ngModelOptions]="{standalone: true}" placeholder="Write your comment here"></ion-textarea>

    <hr>

    <ion-item>
        <ion-label stacked>Your Name</ion-label>
        <ion-input [(ngModel)]="remark.name" name="name"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Your Email</ion-label>
        <ion-input [(ngModel)]="remark.email" name="email"></ion-input>
    </ion-item>
    <button ion-button type="submit" block>Send</button>
</form>

提交后的控制台响应：

Object

    easy-to-use: ""

    email: "Joshn@hotmail.com.au"

    improvement-comments: ""

    information-good: ""

    name: "Josh"

    problem: "scenic"

    problem-comments: ""

    recommend-app: ""

文本区域没有绑定和星标（可能是与单个组件相关的问题）

Answer 1

this.remark = [];

您正在组件中定义一个数组。在模板中，您将作为对象及其属性进行访问：

<ion-list radio-group [(ngModel)]="remark.problem" [ngModelOptions]="{standalone: true}">

将类变量声明为：

remark:{problem:string};

在构造函数中，

  this.remark = {
    problem:''
  }

我还有一个文本区域<ion-textarea [(ngModel)]="remark.improvement-comments" > [ngModelOptions]="{standalone: true}" placeholder="Write your comment here">> </ion-textarea>没有显示在数组
中

它不是一个数组。这是一个对象。只需在声明和构造函数定义中添加需要改进注释的属性，如下所示：

remark:{
   problem:string,
   'improvement_comments':string
   };

在构造函数中，

  this.remark={
   problem:'',
  'improvement_comments':''
   };

注意：我建议您使用下划线而不是破折号，因为dashes in variable names in javascript can cause errors

它被js。

视为减法运算符

表单值不绑定并显示空白变量

1 个答案: