html - hvordan kalle en metode når mat-option er valgt (angular)?

Jeg er ny i Angular og jeg vil kalle en spesifikk metode, bare når alternativ3 er valgt. Jeg sliter med å løse dette og kan ikke finne mye informasjon om dette på internett.

Når jeg velger alternativ3, er utdataene tomme.

Her er koden min så langt:

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';
  }
}

Svar #1

prøv dette

<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>

i component.ts

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

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

stackblitz-eksempel

Svar #2

Hvis du vil lytte til en hendelse fra en Angular-komponent, må du legge til parenteser rundt hendelsen:

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

Da bør metoden din begynne å kjøre.

Relaterte artikler