1

我有一个简单的自定义下拉组件，我在另一个（父）组件中使用它。

这一切都很好。但是，每当我通过选择另一个选项来更改下拉列表的值时，绑定到组件的值就永远不会更新。

我的组件如下所示：

@Component({
  selector: 'dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {

  @Input()
  userId: number;

  ngOnInit() {
    if(!this.userId) {
      this.userId = 1;
    }
  }
}

和html：

<select [ngClass]="[sizeClass]" [(ngModel)]="userId">
  <option value="1">val 1</option>
  <option value="2">val 2</option>
</select>

我在这样的父组件中使用它（app.component.html）：

<dropdown [(userId)]="appUserId"></dropdown>
<br><br>
<button (click)="saveData()">Save</button>

在 app.component.ts 中：

export class AppComponent implements OnInit  {
  appUserId: number;

  ngOnInit() {
    this.appUserId = 1;
  }

  saveData(): void {
    // I expect appUserId to be changed, because I picked another value from the dropdown
    alert('selected userid = ' + this.appUserId);
  }
}

当我点击保存按钮时，它会显示我的属性永远不会更新。

演示应用

我在这里有一个演示：

https://stackblitz.com/edit/angular-c3ew8a?file=src/app/dropdown/dropdown.component.html

重现：

  • 加载应用程序。
  • val 2从下拉列表中选择
  • 点击Save按钮。

我希望看到显示文本的警报selected userid = 2。但它显示：selected userid = 1. 它从未更新该userId属性。

我必须在 Angular 中做什么才能完成这项工作？

4

1 回答 1

2

问题是您试图在应用程序组件和下拉组件之间使用双向数据绑定，就像您在组件和它自己的模板之间使用它一样。

可以在组件之间使用两种数据绑定方式，但为了做到这一点，您必须为子组件提供 Input() （就像您所做的那样）并从您的子组件发出与您的输入同名的事件 + '改变'后缀。此事件应包含新值。

我分叉了你的stackblitz，这样你就可以看到一个你想要的工作示例。

@Component({
  selector: 'dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {

  @Input()
  userId: number;

  @Output() // Emit event with the same name of the input and 'Change' suffix 
  userIdChange = new EventEmitter();

  ngOnInit() {
    if(!this.userId) {
      this.userId = 1;
    }
  }
}

<select [ngClass]="[sizeClass]" [value]="userId" (change)="userIdChange.emit($event.target.value)"> <!-- $event.target is the target of the change event with is the select element) -->
  <option value="1">val 1</option>
  <option value="2">val 2</option>
</select>

来自 Angular 文档的参考

于 2021-01-12T17:17:23.117 回答