Nativescript @Input 字符串不通过，但数字通过答案

【问题标题】：Nativescript @Input string not passing but number doesNativescript @Input 字符串不通过，但数字通过
【发布时间】：2020-09-10 20:28:02
【问题描述】：

我有这种奇怪的行为，当我将@Input 与字符串一起使用时，我得到“未定义”，但如果它是一个数字，则数据似乎被传递了。

custom-progress-bar-component.ts

import { Component, OnInit, Input, ViewChild, ElementRef} from '@angular/core';
    
@Component({
        moduleId: module.id,
        selector: 'custom-progress-bar',
        templateUrl: './custom-progress-bar.component.html',
        styleUrls: ['./custom-progress-bar.component.css']
    })
    export class CustomProgressBarComponent implements OnInit {
        
        @Input() step: string;
        @Input() stepstring : string;
        
        constructor() { }
    
        ngOnInit() {
            console.log("step" + this.step); // 1
            console.log("stepstring" + this.stepstring); // undefined
        }
    
    }

home.html

<StackLayout>
     <custom-progress-bar [step]="1" [stepstring]="toto"></custom-progress-bar>
</StackLayout>

我误会了什么？

【问题讨论】：

试试stepstring="toto"或[stepstring]="'toto'"
谢谢，两者都有效，但为什么呢？
括号表示传入的值是一个变量。通过省略括号，它仍然是一个输入，但它没有被插值。使用括号和额外的单引号，它被插入为纯字符串。
很有趣，谢谢。如果你愿意，你可以把它作为答案

标签： nativescript angular2-nativescript

【解决方案1】：

通过使用括号，你告诉 Angular 你传入的值需要被插值。不完全确定数字为什么起作用，可能是某种隐式处理，因为变量不能以数字开头。

您可以删除括号或将显式字符串传递给插值属性：

<StackLayout>
     <custom-progress-bar [step]="1" stepstring="toto"></custom-progress-bar>
</StackLayout>

或带括号

<StackLayout>
     <custom-progress-bar [step]="1" [stepstring]="'toto'"></custom-progress-bar>
</StackLayout>

如果它是一个原始值，我更喜欢无括号的属性，但取决于你。

【讨论】：