javascript - @Input() 问题

Question

我正在尝试从另一个组件的变量中获取数据，但到目前为止还没有成功。

这个想法是，当我选中一个复选框时，变量( bool 值)变为 true，并且页面上的某些内容可见，反之亦然。

所以基本上我希望来自 InstellingenComponent 的变量能够在 AfdelingDetailComponent 中工作。使用 @Input() 它不起作用......我变得不确定。

这是我的设置组件:

export class InstellingenComponent implements OnInit {


  toonNaam = false;
  toonTijd = false;
  toonType = false;
  toonSanitair = false;
  toonKinder = false;
  toonSalon = false;
  toonKamerNummer = false;
  hulpKleur = "red";
  behandelKleur = "orange";
  volKleur = "green";
  leegKleur = "white";

我的设置 html:(是的，这是一个对话框)

<h1 md-dialog-title>Instellingen</h1>
<div md-dialog-content>Welke gegevens wil je zien? </div>
<md-checkbox class="check-margin" [(ngModel)]="toonKamerNummer">Kamernummer</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonNaam">Patiëntnaam</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonTijd">Tijdstip behandeling</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonType">Type behandeling</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonSanitair">sanitair</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonKinder">Kinderverzorgingsruimte</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonSalon">Salon</md-checkbox>
<div md-dialog-actions>
  <button md-button md-dialog-close="Option 1">Sluiten</button>

 </div>
  <app-afdelingdetail
    [toonKamerNummer]="toonKamerNummer"
    [toonNaam]="toonNaam"
    [toonTijd]="toonTijd"
    [toonType]="toonType"
    [toonSanitair]="toonSanitair"
    [toonKinder]="toonKinder"
    [toonSalon]="toonSalon"
    [behandelKleur]="behandelKleur"
    [hulpKleur]="hulpKleur"
    [leegKleur]="leegKleur"
    [volKleur]="volKleur"
  >
  </app-afdelingdetail>

具有输入的另一个组件:

 export class AfdelingdetailComponent implements OnInit {

 

  @Input() toonNaam:boolean;
  @Input() toonTijd:boolean;
  @Input() toonType:boolean;
  @Input() toonSanitair:boolean;
  @Input() toonKinder:boolean;
  @Input() toonSalon:boolean;
  @Input() toonKamerNummer:boolean;
  @Input() hulpKleur;
  @Input() behandelKleur;
  @Input() volKleur;
  @Input() leegKleur;
}

另一个组件的 html 让您了解我想要做什么:

<div class="container" *ngIf="selectedAfdeling"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
  <div *ngFor="let kamer of selectedAfdeling.kamers">
    <a  [routerLink]="['/patient', kamer.id]">
      <div class="kamer" [style.width.px]="kamer.width" [style.height.px]="kamer.height"
           [style.background-color]="getColor(kamer)">
        <div *ngIf="toonKamerNummer" id="kamernummer">Kamer {{kamer.kamernummer}}</div>
        <div *ngIf="toonNaam">{{kamer.naam}}</div>
        <div *ngIf="toonType">{{kamer.behandelingstype}}</div>
        <div *ngIf="toonTijd">{{kamer.behandelingstijd}}</div>
        <div *ngIf="toonSanitair && kamer.sanitair">
          <md-icon>wc</md-icon>
        </div>
        <div *ngIf="toonKinder && kamer.kinderverzorgingsruimte"><md-icon>child_care</md-icon></div>
        <div *ngIf="toonSalon && kamer.salon"><md-icon>event_seat</md-icon></div>
      </div>
    </a>

</div>
</div>

Answer 1

新答案

好吧，显然这是关于将值与 Angular Material 复选框绑定(bind)的方式。我尝试过 [(ngModel)] 但我也惨败了。

您应该摆脱 [(ngModel)] 绑定(bind)(恕我直言)，并像这样绑定(bind)您的变量:

在您的模板中:

<md-checkbox [checked]="myVariable" (change)="myVariable=!myVariable">Check me!</md-checkbox>

不要忘记在组件中声明并初始化变量:

myVariable: boolean = false; // or true

如果变量未初始化，它将无法按原样工作。

看到这个骗子:https://plnkr.co/edit/CFLsnh2MDreiEDXKfnXc?p=preview

感谢这个相关问题: Angular 2 Checkbox Two Way Data Binding

以及此处的 Angular Material 文档: https://material.angular.io/components/component/checkbox