Блог

Полный новичок в angular2 и не опытный веб-разработчик, поэтому я приношу извинения за любую крайнюю глупость, которая присутствует в этом вопросе…

У меня возникли некоторые проблемы с созданием компонента для выпадающего списка выбора. Моя цель — использовать этот компонент в другом компоненте и иметь метод в родительском компоненте, вызываемый каждый раз при нажатии опции в списке выбора.

Вот шаблон для выпадающего списка-input (дочерний компонент):

     <div>
    <select>
        <option (click)="clicked($event)" *ngFor="let option of options">{{option.label}}</option>
    </select>
    </div>
  

И вот как выглядит класс для этого:

 export class DropdownInput {
// List of options for the dropdown to have
public options: InputOption[];

// Url for controller method to get options
@Input() url = "/api/LogViewer/GetOpts";

@Output() clickEvent = new EventEmitter();

public clicked(event) {
    this.clickEvent.emit(event);
}

// Get list of options on construction
constructor(http: Http) {
    http.get(this.url).subscribe(result => {
        this.options = result.json();
    });
}

interface InputOption {
    value: string;
    label: string;
}
  

Итак, из того, что я понимаю о том, что у меня есть, к каждой опции выпадающего списка привязан метод ‘clicked()’ при нажатии. Этот метод должен передавать событие щелчка методу, который родительский привязывает к ‘ClickEvent’.

Вот как я использую этот компонент в родительском:

 <dropdown-input (clickEvent)="typeClick($event)"></dropdown-input>
  

И родительский компонент имеет этот метод внутри класса:

 public typeClick(event) {
    console.log(event);
}
  

Является ли этот дизайн принципиально ошибочным или я просто совершаю глупую ошибку? Я не получаю никаких ошибок или чего-либо еще при запуске, но изменение параметров выпадающего списка также ничего не регистрирует.

Вторая проблема: есть ли хороший способ передать URL-адрес в качестве входных данных в раскрывающийся компонент? Простое указание «[url]=»/api/LogViewer/GetOpts» при использовании выпадающего списка ввода выдает ошибку.

Спасибо!

P.S. Просто чтобы избежать проблемы XY, я делаю все это, потому что хочу создать компонент, который в основном представляет собой панель входных данных (текстовые поля, выпадающие списки, переключатели, календари), которые я могу динамически создавать на множестве разных страниц (для использования поверх таблицы данных для фильтрации и т.д.). Я думаю, это похоже на форму, есть ли решение для этого уже?

Вы прослушиваете событие (click) в вашем варианте, но вы должны прослушивать событие change. Вы также передаете фактическое событие своему родительскому компоненту, в то время как хотите передать выбранное значение. Вы можете сделать это следующим образом:

 <select (change)="onChange($event.target.value)">
  

Если вы сделаете это, метод onChange будет вызван с выбранным значением, а не с фактическим событием изменения.