Question

我正在使用一个表格，我重复了几次以下模型：

我有一个选择，我可以选择任何类型的Bottle。
一个输入，我可以选择所选类型的瓶子数量。

对于2个数组的瓶子重复此模式（Bottle类型由Id和Name组成），如下所示：

一个orderedBottles数组，用户可在此订购一些瓶子。
一个returnedBottles数组，用户可以返回一些瓶子。

我希望能够在提交时选择任何类型的瓶子和相应的数量，但我相信我错过了一些东西，因为这些行为都搞砸了：

两个数组的输入相互链接，
当我更改选择中的某些选项时，有时其他选项会更新，这不是我想要的（显然）......

以下是plunkr中的一个工作示例：http://plnkr.co/edit/1z6dN6?p=preview

这是我的 html 文件（我使用的是AngularMaterial 2）：

  <div fxLayout="row" style="max-width: 80%">

    <!-- ORDERED BOTTLES -->
    <div fxLayout="column" style="min-width: 50%">
      <div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of orderedBottles; let i = index">
        <md-select class="select" placeholder="Select bottle type" name="orderedTypeSelect_{{i}}" [(ngModel)]="orderedBottles[i].typeId">
          <md-option class="options" *ngFor="let type of orderedClonedArrayBottles" [value]="type.typeId">
            {{ type.name }}
          </md-option>
        </md-select>

        <md-input-container class="container">
          <input md-input type="number" name="orderedBottleInput_{{i}}" autocomplete="off" [(ngModel)]="orderedBottles[i].count"
          step="1" min="0" max="99">
        </md-input-container>

        <button class="button-row" type="button" (click)="removeRow(i, 'order')">-</button>
      </div>
    </div>

    <!-- RETURNED BOTTLES -->
    <div fxLayout="column" style="min-width: 50%">
      <div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of returnedBottles; let j = index">
        <md-select class="select" placeholder="Select bottle type" name="returnedTypeSelect_{{j}}" [(ngModel)]="returnedBottles[j].typeId">
          <md-option class="options" *ngFor="let typed of returnedClonedArrayBottles" [value]="typed.typeId">
            {{ typed.name }}
          </md-option>
        </md-select>

        <md-input-container class="container">
          <input md-input type="number" name="returnedBottleInput_{{j}}" autocomplete="off" [(ngModel)]="returnedBottles[j].count"
          step="1" min="0" max="99">
        </md-input-container>

        <button class="button-row" type="button" (click)="removeRow(j, 'return')">-</button>
      </div>

    </div>
  </div>

要添加一些解释，这是一个子组件，其Bottle个@Input()数组为orderedClonedArrayBottles，我将其克隆到2个不同的数组中returnedClonedArrayBottles和orderedBottles ）这样我的父数组就不会从子更新中更新。

然后，我使用returnedBottles数组和ngOnChanges(changes) { // Get @Input data when it's ready if (changes.bottleArray) { // Cloning //this.orderedClonedArrayBottles = [...changes.bottleArray.currentValue]; //this.returnedClonedArrayBottles = [...changes.bottleArray.currentValue]; this.orderedClonedArrayBottles = Array.from(changes.bottleArray.currentValue as Bottle[]); this.returnedClonedArrayBottles = Array.from(changes.bottleArray.currentValue as Bottle[]); console.log(this.orderedClonedArrayBottles); console.log(this.returnedClonedArrayBottles); // Display first rows if (this.orderedClonedArrayBottles.length > 0) { this.orderedBottles.push(this.orderedClonedArrayBottles[0]); } if (this.returnedClonedArrayBottles.length > 0) { this.returnedBottles.push(this.returnedClonedArrayBottles[0]); } } }显示我的瓶子，从预先克隆的2中获取它们的值。

*ngFor

我不知道为什么这不能正常工作，很可能是因为我没有像我应该那样管理trackBy。我看过关于*ngFor function wpbootstrap_scripts_with_jquery() { // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );的帖子，但我不知道这是否会有所帮助。

Answer 1

您正在克隆bottleArray。但在您的情况下，瓶子对象不会被克隆。相同的引用被推送到两个数组中。

选中answer。

您可能必须为每个瓶子对象使用Object.assign。如果您有嵌套对象，则必须遍历属性并复制。

有几个* ngFor的表单上的模型绑定问题

1 个答案: