Angular 5 ngModel не обновляет значение

Итак, у меня есть следующий компонент:

export class ModuleComponentComponent implements OnInit {
    dropzoneConf;
    fileService = environment.getFileUrl;

    constructor(
        private moduleComponentService: ModuleComponentService) {
    }

    @Input()
    selectedComponent: ModuleComponent;

    ngOnInit() {
        this.setDropZoneConfig();
    }    
}

И в этом у меня есть следующий html:

<h3 class = "m-portlet__head-text m--font-success">
   <input class = "form-control" type = "text" [ngModel] = "selectedComponent.title" />
</h3>

и способ добавления компонента в свой html:

<div class = "col-lg-8 col-x1-12" *ngIf = "selectedComponent != null">
   <app-module-component [selectedComponent] = "selectedComponent"></app-module-component>
</div>

Когда я что-то ввожу в поле ввода, переменная selectedComponent.title не обновляется.

Кто-нибудь может сказать мне, что происходит?

javascript angular angular5 ngmodel

13.06.2018 14:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

904

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Используйте двустороннюю привязку

 [(ngModel)] = "selectedComponent.title"

13.06.2018 14:28

вы должны использовать двустороннюю привязку данных

[(ngModel)]

<input class = "form-control" type = "text" [(ngModel)] = "selectedComponent.title" />

and make sure to import forms module in app.module.ts

import { FormsModule } from '@angular/forms';

13.06.2018 14:33

Нам нужно использовать двустороннюю привязку данных с [(ngModel)]

<h3 class = "m-portlet__head-text m--font-success">
   <input class = "form-control" type = "text" [(ngModel)] = "selectedComponent.title" />
</h3>

Вы должны прочитать часть о двусторонней привязке данных в документации Angular.

Если вы хотите использовать только [ngModel], вы можете, но вы должны улавливать изменения с помощью (ngModelChange)

<h3 class = "m-portlet__head-text m--font-success">
   <input class = "form-control" type = "text" [ngModel] = "selectedComponent.title" (ngModelChanges) = "setTitle($event)" />
</h3>

Вы можете улучшить его с помощью форм, просто задавайте мне любые вопросы по этому поводу

13.06.2018 14:44

Другие вопросы по теме

Функция внутри подписки - Angular 4

Не удается разрешить все параметры для SiteNotificationComponent: (?)

Рендеринг изменений в Angular в реальном времени на разных устройствах

Как ограничить объем динамического HTML CSS в Angular 4

Обнаружение изменений в HTML дочернего компонента из родительского компонента в Angular

Использование якорной ссылки HTML #id в Angular 6

Вызвать свойство внутри класса, которое появляется после загрузки страницы

При производственной сборке появляется сообщение «Не поймано (в обещании): Ошибка: StaticInjectorError (a) [t]:» ...

Очистка фрагмента роутера в Angular 6

Шаговый компонент, использующий угловой, аналогичный одному в

Angular 5 ngModel не обновляет значение

Ответы 3

Другие вопросы по теме

Похожие вопросы