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

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: "[e-mail]"
    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':''
   };

注意：我建议您使用下划线而不是破折号，因为javascript中变量名称中的破折号可能会导致错误

它被 js 作为减法运算符。