как вызвать метод при выборе mat-option (angular)? - PullRequest
Новая
       17

как вызвать метод при выборе mat-option (angular)?

1 голос
/ 08 января 2020

Я новичок в Angular и хочу вызвать указанный метод c, только когда выбрана опция 3. Я изо всех сил пытаюсь решить эту проблему и не могу найти много информации об этом в inte rnet.

Когда я вызываю option3, вывод пуст.

Вот мой код до сих пор:

app.component. html: 

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" >
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option selectionChange="greet($event)">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

app.component.ts: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'materialdesign';
  selected = 'option33';


  greet() {
    this.selected = 'it works';
  }
}

Ответы [ 4 ]

0 голосов
/ 08 января 2020

Просто определите click обработчик события для элемента c mat-option. 

<mat-option value="option3" (click)="greet()">Option 3</mat-option>
0 голосов
/ 08 января 2020

попробуйте это 

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" (selectionChange)="inputChange()">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

в component.ts 

title = 'materialdesign';
  selected = 'option33';
inputChange(){
  if(this.selected == 'option3'){
    this.greet();
  }
}

  greet() {
    this.selected = 'it works';
  }

Пример стекаблика

0 голосов
/ 08 января 2020

Если вы хотите прослушать событие из компонента Angular, вам нужно добавить круглые скобки вокруг события: 

<mat-option (selectionChange)="greet($event)">Option 3</mat-option>

Тогда ваш метод should должен начать выполняться.

0 голосов
/ 08 января 2020

Попробуйте как показано ниже,

событие selectionChange является частью mat-select. Так что просто вызовите метод, когда вы выбираете опцию из списка. И в зависимости от значения выбранной опции, введите требуемый код.

. html

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected" (selectionChange)="greet($event)">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

.ts 

selected: string;

greet(event) {
  if(event.value === 'option3') {
    // Execute the required code
  }
}
...