Angular2 中的“ng-true-value”和“ng-false-value”替代品答案

【问题标题】："ng-true-value" and "ng-false-value" alternatives in Angular2Angular2 中的“ng-true-value”和“ng-false-value”替代品
【发布时间】：2021-06-28 23:33:30
【问题描述】：

我在Angular 2 中搜索ng-true-value 和ng-false-value 替代品，但没有得到结果。他们是否用其他工具代替了它们？我真的需要他们。提前致谢

【问题讨论】：

我不认为有什么。你有具体的用例吗？这样可以更轻松地提出解决方法。
所以我有这个复选框 <input type="checkbox"[(ngModel)]="selected" (Change)="addQuest($event)"/> ，很明显 selected 值将是 true 或 false 我希望它是标签（这是动态的，例如： {{xx}}) 的复选框..
知道了。我猜你需要一个自定义的ControlValueAccessor 来做到这一点。我很确定 Angular2 目前没有提供任何现成的东西。一般来说，表格仍然需要一些润色。
感谢您的提示 :)
没有答案？？？ @5313M

标签： angularjs angular

【解决方案1】：

解决方法。例如，我们在模型中有一个带有“标志”的“对象”，一个复选框应该将标志设置为值“1”，另一个复选框应该将标志设置为值“2”，如果复选框都未选中，则值应该是“0”，所以：

public setFlag(object: any, event: any): any {
  if (event.target.classList.contains('some-mark-class') && (object.flag == 0 || object.flag == 1)) {
    object.flag = 2;
  } else if (!event.target.classList.contains('some-mark-class') && (object.flag == 0 || object.flag == 2)) {
    object.flag = 1;
  } else {
    object.flag = 0;
  }
}

<input type="checkbox" name="hide-{{object.flag}}" [checked]="object.flag === 1" (change)="setFlag(object, $event)">
<input type="checkbox" name="dlte-{{object.flag}}" [checked]="object.flag === 2" (change)="setFlag(object, $event)" class="some-mark-class">

解决方案可能并不完美，而且有些笨拙，但它确实有效，所以如果你有一些改进，请做。

当我有更多时间时，如果你愿意，我会尝试在某个沙盒中进行：)。

更新： 第 2 版 更好的方法和灵活性

.ts 文件：

public setFlag(obj: any, property: any, trueValue: any, falseValue: any): any {
  if (obj[property] === trueValue) {
    obj[property] = falseValue;
  } else {
    obj[property] = trueValue;
  }
}

<input type="checkbox" name="hide-{{object.flag}}" [checked]="object.flag === 1" (change)="setFlag(object, 'flag', 1, 0)>
<input type="checkbox" name="dlte-{{object.flag}}" [checked]="object.flag === 1" (change)="setFlag(object, 'flag', 'true-value', 'false-value')>

在函数 setFlag 中，我们采用 4 个参数：对象、对象的属性、真值和假值，这使我们可以灵活地设置我们希望的值，并且无需标记类即可执行。希望对你有帮助

【讨论】：

【解决方案2】：

我觉得Experimenter的答案太长了，所以我给出一个简短的：

<input type="checkbox" [(ngModel)]="isActive" [checked]="isActive" name="active" (change)="isActive ? data.is_active = 1 : data.is_active = 0">

我只使用short-if。

【讨论】：

【解决方案3】：

使用来自 npm 的以下指令。它是角度 2 中 ng-true-value 和 ng-false-value 的替代品 https://www.npmjs.com/package/@nikiphoros/ngx-toggle

【讨论】：