Question

在我的组件中，我指定了绑定在UI上的属性。

组件

export class MyComponent implements OnInit {

    public propertyA:string;
    public propertyB:string;

}

UI

<textarea matInput rows="10" 
placeholder="Body" [(ngModel)]="formData.propertyA" 
[ngModelOptions]="{standalone: true}"></textarea>

我该怎么做：

export class MyComponent implements OnInit {

    public propertyA:string = "Some text with {{propertyB}} bound.";
    public propertyB:string;

}

所以基本上，我将propertyA绑定到文本框，并且嵌套在propertyA中的是propertyB的值，该值会根据另一个数据绑定进行更新？

Answer 1

Button

}

您可以尝试使用此Template literals

Answer 2

如果我们需要使propertyA与propertyB保持同步，而不仅仅是最初进行计算：

我的吸气剂

最简单的方法是getters。请记住，在模板中使用getter/functions将在每个变更检测周期执行它（使此可执行文件尽可能简单）。

export class MyComponent implements OnInit {

    public get propertyA():string {
        `Some text with ${this.propertyB} bound.`;
    };
    public propertyB:string;

}

II可观察

更好的方法是将Observable用作可以随时间更改的值。

export class MyComponent implements OnInit {

    public propertyA = this.propertyB.pipe(
        map(propertyB => `Some text with ${propertyB} bound.`),
    );
    // BehaviorSubject is Subject that have initial value and repeat the last value
    public propertyB: Observable<string> = new BehaviorSubject('');

    // somewhere
    foo(){
        this.propertyB.next('New value');
    }
}

// template
<div>propertyA: {{propertyA | async}}</div>
<div>propertyB: {{propertyB | async}}</div>

TS类中的角度数据绑定

2 个答案: