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