Question

我的下拉列表很少，我需要使用相同的函数调用来动态填充下拉列表中的值。我有一个对象数组，将从中填充下拉列表中的值。

所以，主意是我将drop down的名称作为参数传递并迭代值数组，并将返回值列表以显示为下拉列表

问题是：当页面加载时，如何从选择框中调用Angular 6中的任何函数？我不想在单击或更改时调用该函数，我只想在所有select标签上加载页面时调用。

<mat-select [(ngModel)]='name' placeholder="Name" formControlName="name" required>
    <mat-option *ngFor="let fieldValue of fieldValues" [value]="fieldValue.name">
        {{fieldValue.name}}
    </mat-option>
</mat-select>

我想在页面加载时选择标签中的方法。

<mat-select ng-Init="getData(name)" [(ngModel)]='name' placeholder="Name" formControlName="name" required>
    <mat-option *ngFor="let fieldValue of fieldValues" [value]="fieldValue.name">
        {{fieldValue.name}}
    </mat-option>
</mat-select>

但是我们知道在angular 6中没有ng-Init的概念，所以我该怎么办。

Answer 1

您可以使用OnInit生命周期挂钩。示例代码如下：

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

export class MyComponent implements OnInit {
    ngOnInit() {
     //Code to initialize arrays goes here
    }
}

Answer 2

角度的新版本中没有概念链接ng-init。您所能做的就是创建一个指令

import { Directive, Input } from '@angular/core';    
@Directive({
    selector: '[ngInit]'
})
export class NgInit {
    @Input() ngInit;
    ngOnInit() {
        if (this.ngInit) {
            this.ngInit();
        }
    }
}

并像这样使用它-

<div *ngIf="ramadan.date === date && ramadan.time === clock">
  <div *ngIf="ramadan.checked" [ngInit]="play"></div>
  <div *ngIf="!ramadan.checked" [ngInit]="pause"></div>
</div>

Answer 3

正如您所说，您需要在页面加载时构建下拉菜单，并且不想在（ click ）或（ onchange ）事件上上传。

您可以根据需要尝试以下代码。 让我知道您是否不清楚

    <mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods[0]" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>



<mat-form-field >
  <mat-select placeholder="Favorite food" >
    <mat-option *ngFor="let food of foods[1]" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

这是我的交易代码

export class AppComponent implements OnInit{

  foods = [];

  ngOnInit(){
    this.abc();
  }
  abc() {
    this.foods[0] = [
      {value: 'steak-0', viewValue: 'Steak'},
      {value: 'pizza-1', viewValue: 'Pizza'},
      {value: 'tacos-2', viewValue: 'Tacos'}
    ];

    this.foods[1] = [
      {value: 'abc', viewValue: 'abc'},
      {value: 'zyz', viewValue: 'zyz'},
      {value: 'jhg', viewValue: 'kjh'}
    ];
  }

如何从页面加载角度6中的select标签中调用方法

3 个答案: