Question

我意识到这违反了最佳做法，但这是客户的要求。我只需要一个如何使它起作用的想法。角材料无法满足客户的要求，因此我基本上需要采取“艰难的方式”。

客户拥有他们想要应用的唯一标记，而我正在使用JQuery进行标记。标记将“选择”变成ul / li，因此它似乎是一个精美的下拉框。但是我需要从下拉菜单中选择更改，然后回到“选择”，然后再回到Angular TS进行操作。这是一种反应形式，因此当用户更改项目状态时，无需单击“保存”即可更新数据库。要求特别指出，更改状态后，不必要求用户单击按钮。

简而言之，我需要从Jquery中触发Angular / CLI 6'change'。我找不到使用Angular / CLI 6的成功方法。我在Angular / JS和Angular / CLI v 4（在v 6中已弃用）中找到了很好的方法。我需要在Angular / CLI v 6中执行此操作，而我发现的所有示例在Angular / CLI v 6中均无法使用。

这是我的HTML ：（为清楚起见，已缩写）。请注意，“选择”位于for循环内，这确实增加了另一层次的复杂性

<div *ngFor="let item of items">
     <select id="itemStatus" (change)="changeItemStatus($event)">
          <option value="1">Status 1</option>
          <option value="2">Status 2</option>
          <option value="3">Status 3</option>
          <option value="4">Status 4</option>
          <option value="5">Status 5</option>
     </select>
</div>

这是我的“选择”框的标记，称为“ ngOnInit”。我在试图触发“ onchange”的行上放置了一系列“ *”。这永远不会回到Angular。您会看到我尝试了两种不同的方法，但是从未调用过“ change”。显然，我不应该两者都做，但是没有人可以工作。我知道这些可以正常工作，但是它们没有与Angular建立适当的链接。

$('select:not(.select-hidden)').each(function () {
  const $this = $(this);
  const numberOfOptions = $(this).children('option').length;

  $this.addClass('select-hidden');
  $this.wrap('<div class="select">');
  $this.after('<div class="select-styled"></div>');

  const $styledSelect = $this.next('div.select-styled');
  if ($(this).val())
  {
    $styledSelect.text($($this).parent().find('option:selected').text());
  }
  else
  {
    $styledSelect.text($this.children('option').eq(0).text());
  }

  const $list = $('<ul />', {
    'class': 'select-options'
  }).insertAfter($styledSelect);

  for (let i = 0; i < numberOfOptions; i++) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  const $listItems = $list.children('li');

  $styledSelect.click(function (e) {
    e.stopPropagation();
    $this.val('active');
    $('div.select-styled.active').not(this).each(function () {
      $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
  });

  $listItems.click(function (e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel')).change(); *********************
    $this.val($(this).attr('rel')).trigger('change'); *********************
    $list.hide();
  });

  $(document).click(function () {
    $styledSelect.removeClass('active');
    $list.hide();
  });
});

角度6，触发从Jquery选择onChange

0 个答案: