标签: property-binding

我有一个定义imageUrl属性的组件,在我的模板中,我使用此属性来设置图像的URL.我尝试使用插值和使用属性绑定,两者都工作,但我找不到两者之间的任何差异,或何时使用一个而不是另一个.有谁知道这个区别？

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

我注意到没有括号可以绑定东西.有什么不同？

打字稿:

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

@Component( {
    selector: 'my-comp',
    templateUrl: `
    input is {{foo}}
  `

})
export class myComponent {
    @Input() public foo: string;

    constructor() { }
    }

HTML:

情况1

<my-comp [foo]="bar"></my-comp>

案例2

<my-comp foo="bar"></my-comp>

在 WPF 开发方面拥有丰富的经验，我现在正在尝试创建我的第一个 Xamarin.Forms 应用程序。我认识到有一些与 WPF DependencyProperty等效的东西，称为BindableProperty。它们似乎完全相同，所以我的问题是：

与 WPF DependencyProperty 相比，Xamarin.Forms BindableProperty 的实现和行为之间是否存在任何关键差异？

我有一些输入（复选框），如果我的布尔值为true，我希望禁用它们。但是它不起作用...有趣的是，提交按钮可以正常工作，这就是相同的方法...

myComponent.html

      <form [formGroup]="BetreuungsoptionForm" (ngSubmit)="onSubmit()">
        <label *ngIf="!eingetragen" for="art">Art</label>
        <select *ngIf="!eingetragen" formControlName="art" id="art" class="form-control" [(ngModel)]="Art" required >
          <option value="festeAnmeldung">feste Anmeldung</option>
          <option value="flexibleAnmeldung">flexible Anmeldung</option>
        </select>
        <label for="datum">Beginn Datum</label>
        <input formControlName="datum" type="date" id="datum" class="form-control" required>
        <label *ngIf="(Art == 'festeAnmeldung')" for="montag">Montag</label>
        <input *ngIf="(Art == 'festeAnmeldung')" formControlName="montag" [disabled]="montag" type="checkbox" id="montag" class="form-control wochentag">
        <label *ngIf="(Art == 'festeAnmeldung')" for="dienstag">Dienstag</label>
        <input *ngIf="(Art == 'festeAnmeldung')" formControlName="dienstag" [disabled]="dienstag" type="checkbox" id="dienstag" class="form-control wochentag">
        <label *ngIf="(Art == 'festeAnmeldung')" for="mittwoch">Mittwoch</label>
        <input *ngIf="(Art == 'festeAnmeldung')" formControlName="mittwoch" [disabled]="mittwoch" type="checkbox" id="mittwoch" class="form-control wochentag">
        <label *ngIf="(Art == …

通常，我会以这种方式声明输入类型（这很好用）：

<input [(ngModel)]="input1" type="number" placeholder="Working"/>

但是，我希望类型是动​​态的，因此我使用 property binding [type]="objectType"。为了简化问题，我使用了[type]="'number'".

<input [(ngModel)]="input2" [type]="'number'" placeholder="Not Working"/>

现在的问题是，每当我对 进行更改时input2，它都会转换为字符串。情况并非如此input1- 它仍然是预期行为的数字。如何将属性绑定用于类型并防止其转换​​为字符串？

闪电战

我正在使用两个库编写一个角度应用程序：ngx-bootstrap 和 ng-apexcharts。ApexCharts 提供了一个名为 的角度分量，它接受类型为 的<apx-chart>输入。html 看起来像这样：tooltipApexTooltip

  <apx-chart 
    [series]="[{data: timelineData}]"
    [chart]="timeline.chart"
      [fill]="timeline.fill"
      [legend]="timeline.legend"
      [plotOptions]="timeline.plotOptions"
      [xaxis]="timeline.xaxis"
      [colors]="timeline.colors"
      [title] = "timeline.title"
      [tooltip]="timeline.tooltip"
      [yaxis] = "timeline.yaxis"
   ></apx-chart>

以下是角度顶点图表文档的链接：https ://apexcharts.com/docs/angular-charts/

ngx-bootstrap 提供了一个名为的模块TooltipModule，当导入到应用程序模块中时，允许您在任何元素上放置tooltip属性，并且当用户将鼠标悬停在该元素上时，它将创建一个工具提示。看起来是这样的：

  <button type="button" class="btn btn-default btn-secondary mb-2"
      tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
      placement="top">
    Tooltip on top
  </button>

以下是 ngx-bootstrap 工具提示文档的链接：https://valor-software.com/ngx-bootstrap/#/tooltip

我试图一起使用这两个库，但是当我将工具提示模块添加到应用程序模块导入中时，出现编译错误。

@NgModule({
  imports: [
    BrowserModule,
    TooltipModule.forRoot(),
    ...
  ]
...

Error: src/app/activity-report/details/details.component.html:52:8 - error TS2322: Type 'ApexTooltip' is not assignable to …

在QML中（至少在5.6 ¹版之前），一旦在JavaScript上下文中分配了新值，属性绑定就会中断：

Item {
    property bool sourceBool: <some changing value e.g. from C++ code>
    property bool boundBool: sourceBool

    function reassignBool() {
        boundBool = true;
    }
}

一旦reassignBool被调用，boundBool将是true不管的状态sourceBool。

我希望能够为不会破坏原始绑定的属性分配一个临时值；临时值将一直存在，直到NOTIFY触发了与原始绑定关联的任何信号为止，此时绑定属性将再次反映绑定计算出的值。

作为一个示例用例，假设我有一个我不希望用户连续按下两次的按钮，并且该按钮根据某些规则启用或禁用：

MyButton {
    id: onceOnlyButton
    // Suppose the QML type `MyButton` provides a boolean property
    // called `enabled` that greys out the button and prevents it from
    // being clicked when `false`.
    enabled: <condition1> && <scondition2>
    onClicked: {
        <schedule some asynchronous …

我制作了一个简单的JavaFX应用程序。在此应用程序中，有一个2列的树形表和一个复选框。如果选中此复选框，则第2列将可见，否则不可见。为此，我将树形表的列可见属性绑定到复选框selected属性。当我单击复选框时，列状态会发生变化，但同时会给出。

原因：java.lang.RuntimeException：TreeTableColumn.visible：无法设置绑定值。

如果我使用双向绑定，则不会出现此错误。但是我不需要双向绑定。是错误还是我没有正确使用绑定？请使用下面的代码重现此错误。我使用jdk1.8.0_111。

JavaFXApplication.java

package test;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class JavaFXApplication extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

FXMLDocumentController.java

package test;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.TreeTableColumn;
import …

我正在尝试在Angular中进行属性绑定的示例。我决定拍摄一张图像，然后通过属性绑定放置它的所有3个属性-宽度，高度和src。令我惊讶的是，虽然没有错误，并且图像通过URL呈现（URL中没有错误），但宽度和高度仍呈现为零（0）。为什么这个？据我所知，Image将高度和宽度作为其属性。那问题在哪里呢？

abc.component.html

//This does not work - gives height:0px, width:0px
<img [width]="'100px'" [height]="'100px'" [src]="'./assets/img/hermione.jpg'">

//This works - renders image, with height:100px, width: 100px
<img width="100px" height="100px" [src]="'./assets/img/hermione.jpg'">

有人可以通过奇怪的行为来解释为什么第二种情况运行良好，但首先虽然图像被渲染但从未被看到（高度：0px，宽度：0px）？

错误：

另外，（根据Pronoy Sarkar的要求-参见下面的答案）

//This also works
<img [attr.width]="'100px'" [attr.height]="'100px'" [src]="'./assets/img/hermione.jpg'">

现在，问题是为什么简单的[高度]和[宽度]不起作用？毕竟，我们从未做过[attr.src]吗？

我有一个 javafx 应用程序，其中有多个选项卡（计时器、秒表、时钟），每个选项卡都有一个单独的控制器，用户可以使用开始/停止按钮添加和独立启动多个计时器。

我尝试将 TextField 绑定到另一个类 MyTimer 的属性，该属性跟踪经过的时间，但它最终（运行几秒钟后）开始抛出错误。（如果您检查下面的代码，请注意，只有将“Thread.sleep”设置为 10 毫秒时才会发生这种情况-当我将延迟增加到 100 毫秒时，它会继续运行大约一分钟并且没有崩溃-我没有进一步测试，因为我想解决根本原因而不是增加延迟）。

只是让您有一个快速的想法： 应用程序图片

MyTimer 类：

    public class MyTimer implements Startable {

...

    private long startNanoTime, storedElapsedTime, totalTime;
    private TimerStates state;
    private StringProperty timerStringProperty = new SimpleStringProperty(DEFAULT_TIMER_STRING_VALUE); 

    public MyTimer() {
        //constructor
    }

    public long getRemainingTime() {
        //returns remaining time
    }

    public StringProperty timerStringPropertyProperty() {
        return timerStringProperty;
    }

    @Override
        public boolean start() {
            if (this.state.isRunning() ) {
                System.out.println("Already running.");
                return false;
            }

            this.startNanoTime = System.nanoTime();
            this.state = TimerStates.RUNNING;

            Runnable startTimerRunnable = …