使用 angular 2 的两种方式绑定

Question

我有一个输入，我在其中使用 2 路绑定语法来填充它的值，就像在一个单独的组件中一样：

  <input type="text" [(ngModel)]="this.inputValue" id="itemText">

在我的 index.html 中，我设置了 inputValue 的值：

  onSelect: function (request, response) {
          this.inputValue = request.item;
    }

但是，我的输入正在使用这个新值进行更新，我缺少什么？

编辑： 组件设置如下：

@Component({
  selector: 'app-leftpane-table',
  templateUrl: './leftpane-table.component.html'
})
export class LeftpaneTableComponent implements OnInit {
  inputValue:any;
  constructor(private ds: DataService) { }

  ngOnInit() {}

在 index.html 中，一旦从搜索结果中选择了一个项目，我就会设置 inputValue：

$('.ui.search')
  .search({
    apiSettings: {
      url: 'http://localhost:8088/Badges/{query}'
    },
    onSelect: function (request, response) {
        var urlApi = 'http://localhost:8088/Badges/Details/' + request.item;
        this.inputValue = request.item;
    }
});

Answer 1

不要在 Angular 模板中使用 this。您的输入应如下所示：

<input type="text" [(ngModel)]="inputValue" id="itemText">

编辑：

当您在 onSelect 函数中引用 this 时，您并没有引用 Angular 组件 - 您引用的是函数。你可以做的是在jQuery函数之前引用this：

const componentRef = this;
$('.ui.search')
  .search({
    apiSettings: {
      url: 'http://localhost:8088/Badges/{query}'
    },
    onSelect: function (request, response) {
        var urlApi = 'http://localhost:8088/Badges/Details/' + request.item;
        componentRef.inputValue = request.item;
    }
});

并使用此引用代替this 关键字。