Question

我的json数据包含一个具有“ Y”或“ N”的字段，根据该值，我必须设置一个复选框的值。

在哪里进行翻译，如果它是“ Y”，则选中该复选框，如果它是“ N”，则不选中该复选框？

代码如下：

navigation-detail.component.html

<div *ngIf="navigation != null">
<form>
  <label for="navName">Navigation Name</label>
  <br/>
  <input type="text" name="navName" [(ngModel)]="navigation.NavName" >
  <br/>
  <label for="navId">Nav ID</label>
  <br/>
  <input type="text" name="navId" [(ngModel)]="navigation.NavId" >
  <br/>
  <label for="navParentCode">Nav Parent Code</label>
  <br/>
  <input type="text" name="navParentCode" [(ngModel)]="navigation.NavParentId">
  <br/>
  <label for="navPageURL">Page URL</label>
  <br/>
  <input type="text" name="navPageURL" [(ngModel)]="navigation.NavPageURL">
  <br/>
  <label for="navPosition">Position</label>
  <br/>
  <input type="text" name="navPosition" [(ngModel)]="navigation.NavPosition">
  <br/>
  <label for="navRoleAccess">Role Access</label>
  <br/>
  <input id="textboxid" type="text" name="navRoleAccess" [(ngModel)]="navigation.NavRoleId">
  <br/>
  <label for="navTargetPage">Target Page</label>
  <br/>
  <select [(ngModel)]="navigation.NavTarget" [value]="navigation.NavTarget">
    <option>_target</option>
    <option>_blank</option>
    <option>_parent</option>
  </select>
  <br/>
  <input type="checkbox" [name]="navigation.NavActive" [(ngModel)]="navigation.NavActive" [value]="navigation.NavActive">Navigation Active
  <br/>
  <button type="submit" (click)="onSubmit(navigation)">Submit</button>
</form>
</div>

navigation-detail.component.ts

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { ValueTransformer } from '@angular/compiler/src/util';
import { INavigation } from '../INavigation';
import { ShareNavigationService } from '../share-navigation.service';

@Component({
  selector: 'app-navigation-detail',
  templateUrl: './navigation-detail.component.html',
  styleUrls: ['./navigation-detail.component.css']
})
export class NavigationDetailComponent implements AfterViewInit {
  navigation: INavigation;

  constructor(private sharedNavService: ShareNavigationService) { }

  ngAfterViewInit() {
    this.sharedNavService.navigationChanged.subscribe((navigation) => {
      this.navigation = navigation;
      console.log('navigation detail id is: ' + navigation.NavPageURL);
      navigation.NavTarget = navigation.NavTarget;
      if (navigation.NavActive === 'Y') {
        // this.navigation.NavActive = true;
      }
    });
  }

  onSubmit(navigation) {
    alert('Submitting data:' + JSON.stringify(navigation));
  }

}

JSON数据：

{
    "Id": 1,
    "NavAppId": 1,
    "NavId": "1FGP",
    "NavName": "Home",
    "NavParentId": "",
    "NavPageURL": "?p=home",
    "NavPosition": "Top",
    "NavActive": "Y",
    "NavDesktop" : "Y",
    "NavTablet" : "Y",
    "NavPhone": "Y",
    "NavRoleId" : "6,17,28,43,44,49,50,59,60,63,64,77,78,79,80,81",
    "NavTarget": "_parent"
}

创新：

export interface INavigation {
  Id: number;
  NavAppId: number;
  NavId: number;
  NavName: string;
  NavParentId: string;
  NavPageURL: string;
  NavPosition: string;
  NavActive: string;
  NavDesktop: string;
  NavTablet: string;
  NavPhone: string;
  NavRoleId: string;
  NavTarget: string;
}

Answer 1

您还可以使用[checked]属性来实现。

<input type="checkbox" [name]="navigation.NavActive" [(ngModel)]="navigation.NavActive" [value]="navigation.NavActive" [checked]="navigation.NavActive === 'Y' ? true : false">Navigation Active</input>

从模型设置复选框值

1 个答案: