Можно ли отправить обратно несколько переменных, используя (изменить) в Angular?

Question

У меня в настоящее время есть выпадающий список на моей HTML-странице, из которого выбирают пользователи.Как только они выберут выбор типа "Jeep" , он передаст его моему компоненту, чтобы затем использовать это значение.Мне любопытно, если можно отправить обратно две отдельные переменные одновременно.Я хотел бы передать обратно их выбор "Jeep" , а также другое значение из того же набора данных JSON, например "Black" .

Ниже приведенкод, который я использую, чтобы вставить «джип» в мой компонент.Обратите внимание на данные, как это автомобили.

{name: "Jeep", color: "Black"}

cars.component.html

 <p>Select Car</p>
 <select class="form-control" (change)="changedCar($event)" >
       <option value="">Select Car</option>
       <option *ngFor="let car of cars" value="{{car.name}}">{{car.name}}/option>
</select>

cars.component.ts

 changedCar (event: any) {
      this.selectedName = event.target.value;
      console.log(this.selectedName );
 }

Так что в настоящее время у меня есть этот console.log, выдающий "Jeep" по желанию.Можно ли отправить что-нибудь, чтобы у меня было this.selectedColor, и оно выдаст "Черный" ?

Я очень новичок, поэтому я прошу прощения, если это плохой вопрос.

РЕДАКТИРОВАТЬ: Извините, что сначала не добавил достаточно деталей. - Я хотел сделать это как можно более простым для легкого исправления.Теперь я включу все детали.

cars.component.ts подробнее

ngOnInit() {
  this.databaseService.getCar().subscribe(
    cars => this.cars = cars
  );

database.service.ts

export class Car {
  car: string;
}

getCar(): Observable<Car[]> {
  const url = 'http://localhost:3000/car';
  const data = ({
  });
  return this._http.post(url, data)
  .pipe(
    map((res) => {
      console.log(res);
      return <Car[]> res;
    })
  );
}

Answer 1

Измените свой код на

<p>Select Car</p>
<select class="form-control" *ngFor="let car of cars" 
(change)="changedCar(car.name , car.color)" >
<option value="{{car.name}}">{{ {{car.name}} }}</option>
</select>

changedCar (name , color) {
  this.selectedName = name;
  this.selectedColor = color;
  console.log(selectedColor);
  console.log(selectedColor);
}

Answer 2

Вы можете определить свойство selectedCar в своем коде и связать его с элементом select с помощью [(ngModel)]. Чтобы использовать Car объекты в качестве параметров, значения параметров должны быть установлены с [ngValue]. Первый вариант будет выбран по умолчанию, если для его значения установлено начальное значение selectedCar, которое в приведенном ниже примере кода равно undefined.

Двухсторонняя привязка данных обеспечивает синхронизацию selectedCar с выбранным элементом в раскрывающемся списке без использования обработчика событий. Если вы хотите выполнить дополнительную обработку при изменении выбора, вы можете обработать событие (ngModelChange).

См. Демоверсию этого стека .

HTML:

<select class="form-control" [(ngModel)]="selectedCar">
  <option [ngValue]="undefined">Select a car</option>
  <option *ngFor="let car of cars" [ngValue]="car">{{car.name}}</option>
</select>

Код:

export class Car {
  name: string;
  color: string;
}

export class MyComponent {

  cars: Array<Car> = [
    { name: 'Jeep', color: 'black' },
    { name: 'Ferrari', color: 'red' },
    { name: 'Toyota', color: 'white' },
    { name: 'Ford', color: 'green' }
  ];

  selectedCar: Car;

  ...
}

Answer 3

Это еще один пример отправки свойства и фильтрации массива автомобилей.

component.ts

cars =[ {
      id: 1,
      brand: 'Jeep',
      color: 'black'
    },
    {
      id: 2,
      brand: 'Honda',
      color: 'blue'
    }];
changedCar (event: any) {
  this.selectedName = event.target.value;  
  let car = this.cars.find(x => x.name == this.selectedName);
  console.log(car.color);
}

component.html

<select class="form-control" (change)="changedCar($event)" >
       <option value="">Select Car</option>
       <option *ngFor="let car of cars" value="{{car.name}}">{{ {{car.name}} }}</option>
</select>

Вы можете использовать id или name для фильтрации данных.

Answer 4

Попробуйте следующий код cars - это массив, в котором этот массив будет содержать несколько объектов, например:

component.ts

cars =[ {
      id: 1,
      brand: 'Jeep',
      color: 'black'
    },
    {
      id: 2,
      brand: 'Honda',
      color: 'blue'
    }];
changedCar (event: any) {
   let car = event.target.value;
   console.log(car.color);
}

component.html

<select class="form-control" (change)="changedCar($event)" >
       <option value="">Select Car</option>
       <option *ngFor="let car of cars" [ngValue]="car">{{ {{car.name}} }}</option>
</select>

Answer 5

Поправьте меня, если я ошибаюсь, но, как я понял из вашего вопроса, желаемого поведения можно добиться, установив значение вашего тега опции в car вместо car.name. Поэтому вы будете передавать весь объект автомобиля вместо только имени. Итак, окончательный код должен выглядеть так: <option *ngFor="let car of cars" value="car"> {{car.name}} </option>