在nativescript中，component.ts和html上的变量的双重绑定在某些页面中不起作用。 （尽管仅在登录页面中工作）

Question

在此html组件中，模型将按预期更新。

login.component.html

<FlexboxLayout>
    <StackLayout class="form" [class.dark]="!isLoggingIn">
        <Image src="~/images/logo.png"></Image>
        <TextField hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" [(ngModel)]="user.email"
        class="input input-border"></TextField>
        <TextField hint="Password" secure="true" [(ngModel)]="user.password" class="input input-border"></TextField>
        <Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" class="btn btn-primary" (tap)="submit()"></Button>
        <Button [text]="isLoggingIn ? 'Sign up' : 'Back to login'" (tap)="toggleDisplay()"></Button>
    </StackLayout>
</FlexboxLayout>

login.component.ts

export class LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;

  constructor(private page: Page, private router: Router, private userService: UserService) {
    this.user = new User();
  }

  ngOnInit() {
    this.page.actionBarHidden = true;
    this.page.backgroundSpanUnderStatusBar = true;
    this.user['email']='someemail@gmail.com';
    this.user['password']='passmein';
  }
}

但是双重绑定在其他页面上似乎不起作用。这是一个编辑页面。

html

<FlexboxLayout>
    <StackLayout class="form">
        <Image src="~/images/logo.png"></Image>
        <TextField hint="The make of the car" autocorrect="false" autocapitalizationType="none" [(ngModel)]="car.make"
        class="input input-border"></TextField>
        <TextField hint="Model" autocorrect="false" autocapitalizationType="none" [(ngModel)]="car.model"
        class="input input-border"></TextField>
        <Button text="Save" class="btn btn-primary" (tap)="submit()"></Button>
    </StackLayout>
</FlexboxLayout>

tns

export class UpsertVehicleComponent implements OnInit {
  car:Vehicle;
  new: boolean = true;
  constructor(private page: Page, private router: Router, private route: ActivatedRoute, private vehicleService: VehicleService) { 
    this.car = new Vehicle();
  }

  ngOnInit() {
    var id = this.route.snapshot.paramMap.get("id");
    this.car['make'] ='check';
  }

}

但是输出不会显示在html页面上。这里有什么不同？是否有一些缺少的模块需要导入到编辑组件所属的子模块中？

Answer 1

您必须在模块中缺少NativeScriptFormsModule，将其导入即可解决问题。