Angular 路由参数值未与 ngClass Ternary 绑定

Question

我的 return 值来自我的 html 三进制，previewForm.value['joint_application'] 绑定了不正确的字符串输出表格-page.component.html。用户应从此预览页面导航回主页，以另一种形式编辑此值，该形式使用参数填充 URL，然后由 previewForm

处理

previewForm.value['joint_application'] 从 URL 中获取参数进行解析，以确定参数是真还是假，然后在 html 上相应地显示它。

这个三元组似乎没有根据 URL:

相应地交替

{{ previewForm.value['joint_application'] ? 'Me & My Partner': 'Just Me' }}

所以如果 URL 中的 joint_application=true 我期望 'Me & My Partner'，但是我只得到 'Just Me'

然而，这确实会相应地从 true 和 false 中交替

{{ previewForm.value['joint_application'] }}

我的典型 URL 是：

http://localhost:4200/quote-form;joint_application=true

从我的主页通过以下路径传递到此报价单页面：

app.module.ts

const appRoutes: Routes = [
    { path: 'quote-form', component: FormPageComponent },
]

形式-page.component.ts

export class FormPageComponent implements OnInit {
    public previewForm: FormGroup;

    constructor(
        private fb: FormBuilder,
        private route: ActivatedRoute,
        private router: Router
    ){ }

    ngOnInit() {
        this.previewParamValues()
    }

    previewParamValues() {
        this.route.params.subscribe(params => {
            this.previewForm = this.fb.group({
                joint_application: params.joint_application,
            });
        })
    }

形式-page.component.html

<form [formGroup]="previewForm">
    <div class="form-group form-inline">
        <h6 small ><b>Quotes For: &nbsp;</b></h6>
        <h6 small>{{ previewForm.value['joint_application'] ? 'Me & My Partner': 'Just Me' }}</h6>
    </div>
</form>

Answer 1

您需要创建一个表单控件，而不是在创建表单组时只传递值。

previewParamValues() {
  this.route.params.subscribe(params => {
    this.previewForm = this.fb.group({
      //                 <---- create control here
      joint_application: this.fb.control(params.joint_application),
    });
  })
}

还有一句警告 - 小心将您的参数值转换为布尔值。如果您的参数看起来像 joint_application=false，我怀疑您只会得到字符串值 "false"，这仍然是真实的。

相反，您应该使用布尔值创建表单控件：

Angular <= 8

this.fb.control(!!params.joint_application && 
  params.joint_application.toLowerCase() === 'true')

Angular >= 9

this.fb.control(params.joint_application?.toLowerCase() === 'true')

编辑

"bang bang" 运算符 !! 在 <= v8 版本中严格不是必需的，除非您关心与严格布尔类型的比较。

这是一个相当简单的例子：

const value = null;

const result1 = value && value === 'true';
const result2 = !!value && value === 'true';

const check1 = result1 === false;
const check2 = result2 === false;

console.log("(value && value === 'true') === false");
console.log(check1);
console.log("(!!value && value === 'true') === false");
console.log(check2);

考虑一下，>= v9 版本中的等价物是

this.fb.control(params.joint_application?.toLowerCase() === 'true' || false)

Angular 路由参数值未与 ngClass Ternary 绑定

Angular Route Param Values Not Binding with ngClass Ternary

routes

ternary

angular