标签: two-way-binding

我有一个RecyclerView持有一些CardViews并且每个CardView包含的EditText其乘以用户给出量倍特定速率（速率来自一个端点，价格为每行不同）。对于CardViews，我使用数据绑定。

应用用例：

该应用程序应显示其他货币的金额，例如 2、7.89、14.34 或 110 欧元。

1. 用户在任何行中输入一个金额（在EditText 中），每行都有一个具有不同值的“ rate ”（速率来自 API 端点）字段
2. 用户输入的金额乘以“ rate ”
3. RecyclerView 中的每一行都应该更新

现在的问题是如何使用双向数据绑定更新RecyclerView中所有 EditTexts 元素的文本

这是我用于数据绑定的数据类：

data class CurrencyItem(
    var flag: String,
    var shortName: String,
    var fullName: String,
    var rate: Double
) : BaseObservable() {

    @Bindable
    var rateTimesAmount: String = (CurrencyApplication.userEnteredAmount * rate).toString()
        set(amount) {
            val amountAsDouble = amount.toDouble() …

我有一个数据网格,我已经绑定到SqlDataApter.如果我使用DataTextColumn为网格设置XAML,如下面的代码所示,它可以很好地工作

<DataGrid AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="27,42,0,0" Name="dataGrid1" VerticalAlignment="Top"  AreRowDetailsFrozen="True">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding KEY}" Visibility="Hidden" IsReadOnly="True"></DataGridTextColumn>
            <DataGridTextColumn Binding="{Binding CHARACTERISTIC_CODE}" Header="Unit" IsReadOnly="True" />
            <DataGridTextColumn Binding="{Binding UNIT_CHAR}" Header="Unit" IsReadOnly="True" />
            <DataGridTextColumn Binding="{Binding IC_DEF_CHAR_NUMERIC}" Header="Number" IsReadOnly="False"/>
            <DataGridTextColumn Binding="{Binding IC_DEF_CHAR_TEXT}"  Header="Text" IsReadOnly="False" />
            <DataGridTextColumn Binding="{Binding IsNumeric}"  Header="Status" IsReadOnly="True" />
            <DataGridTextColumn Binding="{Binding IsText}" Header="Status" IsReadOnly="True" />
        </DataGrid.Columns>

我使用dataGrid1.ItemsSource = dTable.DefaultView将其绑定到代码中的数据表,并使用SqlDataAdapter更新方法dAdapter.Update(dTable)保存更改的按钮

问题是我想在记录为NoNumeric时禁用编辑IC_DEF_CHAR_TEXT字段,而在记录IsText时禁用IC_DEF_CHAR_TEXT.我尝试绑定到IsReadOnly属性但发现它不可绑定,因此我为这两个字段创建了模板,并将IsEnabled属性绑定到IsText和IsNumeric字段.

<DataGrid AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="27,42,0,0" Name="dataGrid1" VerticalAlignment="Top"  AreRowDetailsFrozen="True">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding KEY}" Visibility="Hidden" IsReadOnly="True"></DataGridTextColumn>
            <DataGridTextColumn Binding="{Binding CHARACTERISTIC_CODE}" Header="Unit" IsReadOnly="True" />
            <DataGridTextColumn Binding="{Binding UNIT_CHAR}" Header="Unit" IsReadOnly="True" />
            <DataGridTemplateColumn …

我在WPF中听说过很多关于双向绑定的内容,但我并不完全清楚如何实现它或它实际意味着什么.

我有ListView一堆物品.当用户选择新项目时,TextBox应用程序中的a将更改其文本以显示所选项目的某些属性.

但是当用户更改文本框中的文本时,我希望ListView立即更新该项目.是否有任何"双向绑定"神奇的WPF方式来实现这一目标？

使用双向数据绑定时，似乎没有办法观察父组件的变化。

我有一个用于收集标签列表的自定义输入组件。双向数据绑定在此组件与其父组件之间设置和工作。

// the parent component is just a form
// here is how I'm adding the child component
<input-tags formControlName="skillField" [(tags)]='skillTags' (ngModelChange)="skillTagUpdate($event)">
</input-tags>

在父组件中，如何观察绑定变量的变化？虽然它总是最新的（我已经确认了这一点），但我找不到任何关于对变化做出反应的指导。

我试过了：

ngOnChanges(changes: SimpleChanges) {
    if (changes['skillTags']) {
        console.log(this.skillTags);  // nothing
    }
}

和

skillTagUpdate(event){
    console.log(event); // nothing
}

更新： TWDB 恕我直言不是它所宣传的那样。每当我到达 TWDB 似乎是一个解决方案的地方时，我都会重新设计服务和/或可观察的通信。

我正在尝试使用填充了数据对象的嵌套组件创建复杂的反应形式.

我试图实现的行为非常类似于模板驱动形式的双向数据绑定:当用户编辑表单的输入时,数据对象会自动更改.

但是与模板驱动的形式相反,我无法使用,[(ngModel)]因为它在角度V6的反应形式中被弃用.

我知道fromGroup.patchValue()只会进行单向绑定,然后不得不手动订阅更改事件并手动更新数据对象 - 这将导致大量疲惫的代码.

这种情况有没有解决方法？

我试图成功地将一个ObservableCollection绑定到DataTemplate中的TextBoxes.我可以正确显示数据,但我无法通过UI更改列表数据.我有一个名为'model'的Model类,它包含一个名为'List'的ObservableCollection.该类实现了INotifyPropertyChanged接口.这是shell的xaml.Window1网格的DataContext设置为"theGrid.DataContext = model"

<Window x:Class="BindThat.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:BindThat"
Title="Window1" Height="300" Width="300">
<StackPanel x:Name="theGrid">
    <GroupBox BorderBrush="LightGreen">
        <GroupBox.Header>
            <TextBlock Text="Group" />
        </GroupBox.Header>
        <ItemsControl ItemsSource="{Binding Path=List}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Path=., Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </GroupBox> 
</StackPanel>

这是Model类的代码:

class Model : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string name)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(name));
    }

    private ObservableCollection<string> _list = new ObservableCollection<string>();
    public ObservableCollection<string> List
    {
        get { return _list; }
        set 
        { 
            _list = value;
            NotifyPropertyChanged("List"); …

我试图在Angular 4中使用双向绑定.这是我的组件代码:

@Component({
    selector: 'form-validation',
    templateUrl: './form.validation.template.html',
    encapsulation: ViewEncapsulation.None
})

export class ValidationComponent {

    @Input() data;

    @Output dataChange = new EventEmitter();

    //...

}

但是,当我尝试在类似的东西上使用它时:

<form-validation [(data)]="data"></form-validation>

我在Chrome的控制台上收到此错误:

Cannot assign to read only property 'dataChange' of object '#<ValidationComponent>'

该data属性是一个特定类型的数组,但即使我通知此类型或inicialize属性错误发生.

我在我的视图中有这样的声明,并且绑定有值,让我们说6970.87127381382131831,但是,我想将它限制在最多2位小数.由于我使用ngFor列出元素,因此无法使用.toFixed(2)来限制对象.谢谢你们 !

{{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier }}

我试过以下方法:

 {{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier | number : 2 }}

没帮我.

我希望子组件值绑定到父组件.如何实现这一目标@Input()并且[(ngModel)]还不够？

这是一个吸烟者

我目前正在研究angular 5应用程序。我尝试在视图的输入中更改组件的成员变量，并在更改后在组件中使用该变量。

我的结构如下：

文件夹：我的测试

• my-test.component.html
• my-test.component.css
• 我的test.component.ts

1）my-test.component.html：

<input [(ngModel)]="hello" />

2）my-test.component.ts：

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnChanges {
  hello: string = "bonjour";

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // I'd like to log the changes of my field 'hello', 
    // once it get's changed in the input on the ui...

       console.log(changes);
  }

}

不幸的是，该解决方案不起作用。您知道如何在ui上更改组件的变量，然后在组件中使用它吗？

谢谢！！