【问题标题】:Angular 4 - Bind boolean values from db to toggle switch on/offAngular 4 - 绑定来自 db 的布尔值以打开/关闭开关
【发布时间】:2018-08-28 04:46:39
【问题描述】:

在应用程序中,我有一个切换开关,它必须绑定到数据库中的数据。 db 中的名称是 Status,它的值为 True/False。现在我希望在我的表格行中使用切换开关按钮,如果从 db 检索到的状态为 true,它应该显示绿色,如果在 db 中的状态为 false,它应该显示黑色。我尝试了 ngModel 但它不起作用。无论如何,如果我在 DB 中有 true 或 false,它只有在我在屏幕上渲染时才会显示为 false。对于拨动开关,我必须使用我自己的组件。下面是我的代码。

html

<ng-container *ngFor="let data of displayData$ | async;let i = index">
 <tr class= "row-break">
    <form>
     <p>
     <cm-toggle-switch [(ngModel)]="data.Status"  name="switch1"  ></cm-toggle-switch>
    </p>
    </form>
 </tr>
 </ng-container>

DB-
export interface data[
{object:1,
Status:true;},
{object:2,
Status:false;}
]

但是当我写 {{data.Status}} 时,它向我显示 true,false 作为 Status 完美的值。将值绑定到我的开关在哪里出错。任何帮助。

切换文档 -

 <p>
    <toggle-switch [(ngModel)]="formModel.switcher" name="switch1">Main power</toggle-switch>
  </p>
  formModel: any = {
    switcher: true
  };

【问题讨论】:

    标签: angular typescript ngmodel


    【解决方案1】:
    <ng-container *ngFor="let data of displayData$ | async;let i = index">
     <tr class= "row-break">
        <form>
         <p [style.color]="data.Status == true ? 'green' : 'black'">
         <cm-toggle-switch [(ngModel)]="data.Status"  name="switch1"  ></cm-toggle-switch>
        </p>
        </form>
     </tr>
     </ng-container>
    

    可以试试吗?

    【讨论】:

      猜你喜欢
      • 2012-09-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-18
      • 2013-05-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多