Nativescript @Input 字符串未通过但数字通过

Question

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

自定义进度条-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>

我误会了什么？

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

如果是原始值，我更喜欢 bracket-less 属性，但这取决于您。

Nativescript @Input 字符串未通过但数字通过

Nativescript @Input string not passing but number does

nativescript

angular2-nativescript