Значения параметров Angular Route не связаны с ngClass Ternary

Мое возвращаемое значение из моего троичного кода html, previewForm.value['joint_application'], связывает неправильный строковый вывод в form-page.component.html. Ожидается, что пользователь вернется с этой страницы предварительного просмотра на домашнюю страницу, чтобы отредактировать это значение в другой форме, которая заполняет URL-адрес параметрами, которые затем обрабатываются previewForm.

previewForm.value['joint_application'] берет параметры из URL-адреса, анализируется, чтобы определить, являются ли параметры истинными или ложными, а затем отображает их соответствующим образом в HTML.

Этот тернер, похоже, не меняется соответственно в зависимости от URL-адреса:

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

Поэтому, если в URL-адресе join_application=true я ожидаю «Я и мой партнер», однако я получаю только «Только я».

Однако это чередуется с истинным и ложным соответственно.

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

Мой типичный URL-адрес:

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

Который передается с моей домашней страницы на эту страницу формы цитаты по этому маршруту:

app.module.ts

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

form-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,
            });
        })
    }

form-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>

angular routes ternary
person hello world    schedule 06.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно создать элемент управления формой, а не просто передавать значение при создании группы форм.

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", которое по-прежнему соответствует действительности.

Вместо этого вы должны создать элемент управления формой, используя логическое значение:

Угловой ‹= 8

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

Угловой >= 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)
person Kurt Hamilton    schedule 06.03.2020
comment
Я не могу скомпилировать добавление строки this.fb.control(params.joint_application?.toLowerCase() === 'true'). Ожидается двоеточие или выражение - person hello world; 06.03.2020
comment
Возможно, потому что вы используете более старую версию Angular. Я отредактировал свой второй блок кода - person Kurt Hamilton; 06.03.2020
comment
Это исправило! спасибо! Вы используете угловой 9? Я использую 8. Не могли бы вы оставить исправление 9 в своем посте? - person hello world; 06.03.2020
comment
Почему !! необходимо, можно ли это опустить, чтобы получить те же результаты? - person hello world; 06.03.2020
comment
!! не является строго необходимым, я просто любитель строгих типов. !! всегда будет возвращать логическое значение, поэтому, если params.joint_application равно нулю, то будет возвращено false, а не null. Если вы просто выполняете ложные проверки ниже по течению, это не имеет значения, но имеет значение, если вы сравниваете строгие логические значения. - person Kurt Hamilton; 06.03.2020
comment
И да, я на V9 — когда мир наконец-то представил необязательную цепочку. Теперь я едва могу сдержать свое волнение и использую его, когда это возможно. - person Kurt Hamilton; 06.03.2020
comment
Я добавил !! демо к моему ответу, чтобы полностью продемонстрировать, о чем я говорю. Обычно это не имеет значения, потому что мы все ленивы и просто делаем !condition, а не condition === false. - person Kurt Hamilton; 06.03.2020