Проблема привязки входного свойства

Question

Я экспериментирую с Angular 8 и передаю данные между компонентами.

Дочерний компонент выглядит следующим образом:

import { Component, OnInit, Input } from '@angular/core';
import { SelectService } from '../select.service';

    @Component({
      selector: 'app-dynamic-selects, test-dynamic-tag',
      templateUrl: './dynamic-selects.component.html',
      styleUrls: ['./dynamic-selects.component.css']
    })
    export class DynamicSelectComponent implements OnInit {
      @Input() id: any;
      options: any[];
      constructor(private selector: SelectService) { }
      ngOnInit() {
        console.log("TESTING INPUT VALUE: " + this.id);
        console.log(this.id);

        this.selector.users().subscribe(users => {
          this.options = users;
        });
      }
    }

Родительский шаблон - это место, где проявляется проблема. Я пытаюсь вывести различные примеры тега дочернего компонента, но выводятся только теги компонента, в которых [id] является целым числом. Теги со строками просто говорят «неопределено».

@ Идентификатор ввода () набирается как любой , но даже ввод текста как строка не решает проблему.

Ниже приведена разметка родительского компонента:

<app-dynamic-selects [id]="7"></app-dynamic-selects>
<br><br>
<test-dynamic-tag [id]="test"></test-dynamic-tag>
<br><br>
<app-dynamic-selects [id]="Batman"></app-dynamic-selects>
<br><br>
<test-dynamic-tag [id]="14"></test-dynamic-tag>

Как показано выше, я использую 2 разных тега селектора для одного и того же компонента. Но не важно, какой я использую, последующие теги выводят undefined .

Вот что напечатано в моей области консоли с html выше:

ЗНАЧЕНИЕ ВХОДА ИСПЫТАНИЯ: 7
7
ЗНАЧЕНИЕ ВХОДА ИСПЫТАНИЯ: не определено
не определено
ЗНАЧЕНИЕ ВХОДА ИСПЫТАНИЯ: не определено
не определено
ЗНАЧЕНИЕ ВХОДА ИСПЫТАНИЯ: 14
14

Почему я получаю неопределенное значение, а не вывод, строку или целое число, которое я ожидаю?

Answer 1

При использовании синтаксиса в скобках вы привязываетесь к выражению, обычно свойству вашего компонента. Числовой литерал является допустимым выражением, поэтому привязка работает. test и Batman не является допустимым выражением, если в вашем компоненте не определено свойство с таким именем. 'test' и 'Batman' будут работать, поскольку строковый литерал является допустимым выражением.

При связывании с литералами вам не нужен синтаксис скобок, просто используйте обычный синтаксис атрибута html (т.е. без скобок).

Answer 2

, чтобы завершить ответ Маркуса Дреша, вы можете использовать либо

<test-dynamic-tag [id]="test"></test-dynamic-tag>

, а затем у вас должна быть переменная с именем test в вашем rcontroller

или

<test-dynamic-tag id="test"></test-dynamic-tag>

и затем вы передаете строковое значение вашему дочернему компоненту