Question

我正在处理这样的遗留代码：

@Input() set ratio (ratio: { w: number, h: number }) { this._ratio = ratio || null; }
...
console.log(this._ratio.h);

我的问题是我应该在HTML中添加什么才能读取那样的var？我尝试了不同的东西，比如

ratio="30,30"
ratio="{w:30,h:30}"
[ratio]="..."

等。我无法正确设置var。

Answer 1

你还需要 get 来获得比率，否则你的第二个版本是正确的。

＆＃xA;＆＃xA;

这是一个例子

＆ #xA;＆＃xA;

  @Component（{＆＃xA; selector：'ratio-display'，＆＃xA; template：'＆lt; span＆gt; {{ratio.w / ratio.h} }＆lt; / span＆gt;'＆＃xA;}）＆＃xA;导出类RatioDisplay {＆＃xA; ratio_ = {w：1，h：1};＆＃xA;＆＃xA; @Input（）设置比率（比率：{w：number，h：number}）{＆＃xA; if（ratio）{＆＃xA; this.ratio_ =比率; ＆＃XA; }＆＃XA; }＆＃XA;得分比率（）{＆＃xA; return this.ratio _;＆＃xA; }＆＃xA;}＆＃xA;＆＃xA; @Component（{＆＃xA; selector：'app'，＆＃xA; template：`＆＃xA;＆lt; div＆gt;＆＃xA;＆lt; ratio -display [ratio] =“ratio”＆gt;＆lt; / ratio- display＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;`，＆＃xA;}）＆＃xA; export class App {＆＃xA ; ratio = {w：30，h：45};＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

可在此处找到工作的Plnkr： https://plnkr.co/edit/4TuMEzfDB6hxyGbC6csQ?p=preview

＆ #xA;＆＃xA;

当然，在这种情况下你需要一个setter的唯一原因是如果想要防止传递无效组件，如果你只想要一个简单的值来绑定，你可以使用

＆＃xA;＆＃xA;

  @Component（{＆＃xA; selector：'ratio-display'，＆＃xA; template：'＆lt; span＆gt; {{ratio.w / ratio.h}}＆lt; / span＆gt;'＆＃xA;}）＆＃xA;导出类RatioDisplay {＆＃xA; @Input（）ratio = {w：1，h：1};＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

对象文字也可以是直接从你的模板传递

＆＃xA;＆＃xA;

 ＆lt; ratio-display [ratio] =“{w：30，h：45}”＆gt;＆lt; / ratio-显示＆gt;＆＃xA;

＆＃xA;＆＃xA;

https://plnkr.co/edit/4TuMEzfDB6hxyGbC6csQ?p=preview

＆＃XA;

如何使用＆＃34; @input set＆＃34;检索数据在Typescript和Angular 2中？

1 个答案: