Nano Hash - криптовалюты, майнинг, программирование

Выберите элемент управления, не принимающий значение из двухсторонней привязки

У меня есть следующий элемент управления выбором:

<select id="my-select" [(ngModel)]="available" (change)="handleChange($event)">
    <option value="true">Available</option>
    <option value="false">Unavailable</option>
  </select>

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

Чтобы проверить это, я сделал следующий компонент:

import { TextAttribute } from "@angular/compiler/src/render3/r3_ast";
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  available: boolean;
  ngOnInit(): void {
    this.available = false;
  }

  async handleChange(event: Event) {
    // ... some process to set status
    //oops error happened setting status, lets set it back
    this.available = false;
    console.log(event);
  }
}

Блиц стека: https://stackblitz.com/edit/angular7-playground-sapjc8?file=src/app/app.component.ts

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

Что я неправильно понимаю в привязках angular?

angular angular7
03.04.2021

Ответы:


1

Причина этого в том, что именно значение available изменяется в handleChange, но после change detection цикла этого достаточно, чтобы вы использовали setTimeout

async handleChange(event: Event) {
  // ... some process to set status
  //oops error happened setting status, lets set it back
  setTimeout(() => {
    this.available = false;
    console.log(event);
  }, 0)
}
03.04.2021
  • Спасибо. Могу ли я воспользоваться обещанием или подпиской? 03.04.2021
  • как вы сказали, если вы сделаете http-запрос в handleChange функции и измените это available в наблюдателе, он автоматически обновит ваше представление, и вам не нужно будет использовать setTimeout (для теста вы можете использовать что-то, что подделывает запрос interval(1000).pipe(first())), потому что ngZone обезьяны исправляют наблюдаемые. 03.04.2021
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..