Популярные вопросы по тегу COMPONENTS

Слушать изменение служебной переменной из углового компонента

... ails; getUserProfile(){ this.http.get(this.BaseURI+'/UserProfile').subscribe( res=>{ this.userDetails=res; }, err=>{ console.log(err); } ) } В компоненте у меня это: ngOnInit() { this.service.userDetails.subscribe((userDetails) =>this.userDetails=userDetails) } Теперь, когда 4 я запускаю прило ...

Вызов метода динамически через переменные в vuejs

... accept: ".draggable", tolerance: "intersect", drop: function (event, ui) { var leftPosition = pos.left;//ui.offset.left - $(this).offset().left; var topPosition = pos.top;//ui.offset.top - $(this).offset().top; console.log(leftPosition + " "+ topPosition); var type = ui.draggable.attr("id"); //Here call methods according to id of dra ...

React - динамический импорт компонентов

... './Component1' import Component2 from './Component2' import Component3 from './Component3' class Main extends Component { render() { var components = { 'Component1': Component1, 'Component2': Component2, 'Component3': Component3 }; var typ ...

Как визуализировать список статического контента с помощью Vue named slot?

... званного слота, который я 11 вставил следующим образом: <ul class="comp"> <li class="comp-item"><a href="#" slot="links">link 1</a></li> <li class="comp-item"><a href="#" slot="links">link 2</a></li> </ul> Есть ли способ 10 достичь того, что мне нужно, без использования 9 слота с ограниченной областью действия? ...

Применить стиль по умолчанию и изменить стиль кнопки onClick -Angular 4

... mponent.css'] }) export class AppComponent { bntStyle: string; AppComponent() { this. bntStyle = 'btn-default'; } submit() { this.bntStyle = 'btn-change'; } .html <div> <button name="Save" [ngClass]="['bntStyle']" (onClick)="submit()">Submit</ ...

Переключение между компонентами в React JS

... 38 переключиться обратно на первый, но вместо 37 этого произошла ошибка: Предупреждение: React.createElement: тип 36 не должен быть нулевым, неопределенным, логическое 35 или числовое. Это должна быть строка (для 34 элементов DOM) или ReactClass (для составных 33 комп ...

Угловой - можно наблюдать с помощью async pipe, многократно используемого в шаблоне ... Хорошая практика или плохая?

... сделать это, как указано выше (что я часто 6 вижу), или более эффективно подписаться 5 на мою наблюдаемую внутри моего файла .ts, установить 4 одну объектную переменную, а затем привязать 3 к что? Идея последнего подхода заключается 2 в том, что наблюдаемое будет вызываться 1 только один раз. Вопросы: Вызывается ли наблюдаемое в приведенном выше коде каждый раз, когда оно используется через | асинхронный? Производит ли компиля ...

Создание простой таблицы в WPF?

... ты / элементы управления), который 3 позволил бы мне нарисовать простую таблицу 2 стилей Micr ...

Отображение многомерного массива с помощью ReactJS

... React.render( <DisplayData tArr = {userData} /> , document.getElementById('content') ); // mybutton.js var React = require('react'); module.exports = React.createClass({ render: function() { return ( ...

Состояние инициализации компонента React из реквизита

... constructor (props) => { const { description } = props; this.state = {description}; } render () { const {state: { description }} = this; return ( <input type="text" value={description} /> ); } } export default SecondComponent; Обновление: Я изменил 2 setState() на this.state = {} (спасибо joews), однако 1 я все еще не вижу ...

Реакция / функциональный компонент / реквизиты изменены / getDerivedStateFromProps

... нова (обновляется), когда 6 вызов api из родительского компонента завершился, таким 5 образом, оставив значения формы пустые. Используя 4 компонент класса, я бы решил это с помощью 3 getDerivedStateFromProps(). Есть ли что-нибудь подобное в функциональном 2 компоненте? Или я с самого начала делаю 1 это неправильно? Спасибо за любой с ...

Закрывающий тег компонента React

... tabs={this.state.tabs} activeTab={this.state.activeTab} scrollPosition={this.state.scrollPosition} handleClick={this.handleTabClick} /> </div> <TabContent content={this.state.tabs[this.state.activeTab].content} /> </div> ...

Ошибка ReactJS: для каждого модуля разрешен только один экспорт по умолчанию.

... ry = {browserHistory}> <Route path = "/" component = {App}> <IndexRoute component = {Home} /> <Route path = "home" component = {Home} /> </Route> </Router> ), document.getElementById('app')) Выдает 10 ошибку ниже; ОШИБКА в ./main.js Сборка модуля 9 завершилась неудачно: SyntaxError: C: /Users/hasithay/Desktop/reactApp/main.js: только 8 один экспорт по умолчанию разрешен ...

Реагировать на обновление состояния в двух полях ввода из отправки формы

... render() { return ( <form onSubmit={this.handleSubmit.bind(this)}> <label> Name: <input type="text" placeholder="Name" value={this.state.name} onChange={this.handleChange.bind(this)} /> </label><br /> <label> Email: ...

Как проверить, когда данные изменяются в самом компоненте с помощью vue js?

... on() { that.dataToBeWatched = 'data changed'; }, 2000); }, makeSmthWhenDataChanged: function () { // ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty } } }); Как создать 3 такой наблюдатель, используя правильные 2 методы vue js ...

Интерфейс экспорта angular 2 инициализируется внутри компонента

... другой 7 способ запустить их без повторного написания 6 всего этого кода? export interface Data { Code: string; Date: Date; OccurredDate: Date; Person: Person; Vehicle: Vehicle; Policy: Policy; OccurredLocation: OccurredLocation; Phones: Phone[]; Notes: string; Actions: Action[]; } export interface RootObject { Data: Data[]; IsSuccessful: boolean; Messages: any[]; } это 2 моих интерфейса, и ...

Vue.Js, привязка значения к флажку в компоненте

... , // Override input listener to work with v-model input: event => this.$emit('input', event.target.value) } }, hasErrors () { return this.errors.length > 0 } }, } </script> Я 21 импортировал его по всему миру; и вызываю 20 е ...

Компонент без шаблона

... ствовал как метод в моем компоненте, но 5 поскольку он становится немного длинным, я 4 хочу извлечь его в собственный файл Какая 3 здесь лучшая практика в ...

Как использовать компонент родительского модуля в компоненте дочернего модуля в angular2

... ован в родительском 13 модуле, но при попытке импорта и использования 12 в дочернем компоненте он показывает ошибку. Я 11 имею в виду, как использовать общий заголовок 10 для родительского и дочерний модуль Непойманный 9 (в обещании): ошибка: Тип HeaderComponent 8 является частью объявления 2-х модулей: AppModule 7 и ProviderModule! Пожалуйста рассмотрите 6 возможност ...

Angular 2 - Как вызвать метод для дочернего элемента от родителя

... : 'child', template: `...` }) class Child { @Input() fn() { console.log('triggered from the parent') } constructor() {} } Фон - это 5 своего рода запрос на получение, то есть 4 для получения актуального статуса от ребенка. Теперь 3 я знаю, что могу добиться этого с помощью 2 службы и Subject / Observable, но мне было 1 интере ...

Angular: передать компонент в компонент

... </div> ` }) export class TestComponent { @ViewChild('content') content: HTMLElement; getContent() { return this.content; } test() { console.log("test"); } } Теперь я пытаюсь 14 передать несколько экземпляров testComponent 13 в gridComponent. Поэтому у меня есть третий 12 компонент, который выглядит так: template: ` <moving-grid [widgets]="[z1,z2]"> <test class=&qu ...

Реагировать this.props undefined или пустой объект

... }; this.showPosition = this.showPosition.bind(this); } startApp () { this.getLocation(); } getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(this.showPosition); } else { consol ...

Включить другой файл QML из файла QML

... тавлять код QML похоже на сумасшествие. Этот 4 вопрос: QML file include - or one monolithic file (structure QML code)? говорит, что можно просто использовать 3 имя файла QML в качестве имени компонента, но 2 я не могу заставить его работать. Есть какое-нибудь 1 решение? с подробностями, ...

Как передать реквизит в 'экраны' / компоненты в React-Navigation

... Search: {screen: SearchPage}, Favorites: {screen: FavoritesPage}, } ); export default MainScreenNavigator; ExplorePage, аналог SearchPage 5 и FavoritesPage import React from 'react'; import ExplorePage from './app/tabs/ExplorePage'; import {createBottomTabNavigator} from 'react-navigation'; ...other imports class App extends React. ...

Выберите тип <S, K> с динамическими / вычисляемыми ключами

... per(props); this.state = { name: '', age: undefined }; this.handleUpdate = this.handleUpdate.bind(this); } handleUpdate (e:React.SyntheticEvent&lt;HTMLInputElement&gt;) { const key = e.currentTarget.name as keyof Person; const value = e.currentTarget.value; this.setState({ [key]: value }); } render() { return ( ...

Разница между параметрами и запросом в маршрутизаторе vue?

... 14 случай, который меня смущает. Есть страница 13 A и страница B, я хочу перенаправить со 12 страницы A на страницу B, страница B использует 11 динамический маршрут (например, '/ user 10 /: id /: age /: address'), а данные поступают 9 из объекта params (get id, age, address 8 from params), когд ...

Не удалось разрешить: androidx.lifecycle: lifecycle-viewmodel-ktx: 1.1.1

... odel-ktx: 1.1.1 когда я определяю lifecycle_version 4 как «1.1.1» Я просто копирую и вставляю то, что 3 написано в документации, поэтому у меня 2 заканчиваются идеи о том, что здесь не так 1 :( apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' apply plugin: 'kotlin-kapt' android { compileSdkVersion 26 defaultConfig { applicationId "com.mobile ...

Как передать данные в маршрутизатор-представление в Vue.js

... } Компонент, которому 2 я хочу передать данные, загружен, как показано 1 ниже: @section('content') &lt;div style="padding: 0.9rem" id="app"&gt; &lt;router-view name="bookBus"&gt;&lt;/router-view& ...

Когда использовать какой конструктор для ComponentName в Android?

... и почему! Пример: Пакет приложения - de.zordid.sampleapp но класс поставщика виджета - de.zordid.sampleapp.widget.WidgetProvider Использование ComponentName cn = new ComponentName("de.zordid.sampleapp.widget", "WidgetProvider"); Я 9 получил информацию об этом компоненте: ComponentInfo{de.zordid.sampleapp.widget/WidgetProvider}, но 8 я не ...

Динамическое создание экземпляра компонента в Vue.js

... mport Button from 'Button.vue' import Vue from 'vue' var ComponentClass = Vue.extend(Button) var instance = new ComponentClass() instance.$mount() this.$refs.container.appendChild(instance.$el) Однако я получаю две ошибки: Компонент, который 8 я пытаюсь создать, содержит ...

Angular2 обновить вложенное значение FormGroup?

... 'confirm_email': [null, Validators.required], }, {validator: ValidationService.emailMatcher}), 'password': [null, [Validators.required,...]] }); И я хочу 5 установить значение для поля электронной 4 почты. Я пробовал это, но не повезло: this.signupForm.patchValue({'email': 'myvalue@asd.com'}); Но 3 значение вложено, так какой ...

angular2 test, как издеваться над субкомпонентом

... tBaseTestProviders( TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS ); //TODO: want to mock unnecessary directives for this component test // which are MyNavbarComponent and MyToolbarComponent }) it('should bind to {{foo}}', injectAsync([TestComponentBuilder], (tcb) =&gt; { return tcb.createAsync(MyComponent).then((fixture) =&gt; { let DOM = fixture.nativeElement; let myCom ...

Невозможно обновить компонент (приложение) при рендеринге другого компонента

... } } return ( &lt;div className="App"&gt; .... &lt;div className='mixer'&gt; &lt;div key={1} className='vStrip'&gt; &lt;Knob size={150} value={panLevel} handleChangePan = {(e) =&gt; handleChan ...

Обновление состояния родительского компонента из дочернего компонента с помощью перехватчика UseState React Hook

... us:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out" &gt; &lt;svg className="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"&gt; &lt;path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /&gt; &lt;path ...

Глобальные вспомогательные функции ReactJs

... заставят 10 этот компонент раздуться большим количеством 9 кода). Моя ленивая сторона просто хочет, чтобы 8 все они были какие-то глобальные функции, которые 7 могут вызывать компоненты. Я действительно 6 хочу сделать хороший код ReactJs. Вопрос: Каковы 5 лучшие практики с точки зрения глобальных 4 вспомогательных функций в Reactjs? Должен 3 ли я вставлять их в какой-то компонент или 2 просто вставлять ...

Тестирование функции, запускаемой событием "(window: resize)" в Angular 2

... аюсь протестировать функцию (с кармой), которая 7 запускается событием изменения размера окна. В 6 реальном мире все работает нормально, но 5 когда я пытаюсь вручную вызвать событие 4 в тесте, функция никогда не вызывается. Это 3 приводит к провалу теста. Вот мой HTML: &lt;div id="topnav" class="navbar navbar-graylight header-width" role="banner" (window:resize)="onResize($event) ...

:: ng-deep изменяет стиль других компонентов

... pse: collapse; border-spacing: 0; border:2px solid black; } ::ng-deep th { border:2px solid black; } ::ng-deep td { border:1px solid black; } Если не добавить ::ng-deep, стиль моей 5 таблицы не применяется, поэтому я вынужден 4 его использовать. Он работает нормально, у 3 моей таблицы теперь есть границы, но это 2 влияет на другие мои компоненты, как это 1 исправить? РЕДАКТИРОВАТЬ: это мой шаблон: ...

В чем разница между компонентом Angular и модулем

... читал статьи, но это specific article сбило 14 меня с толку, в начале статьи сказано Приложения 13 в Angular имеют модульную структуру. Приложения 12 Angular будут содержать множество модулей, каждый 11 из которых предназначен для одной цели. Обычно 10 моду ...

Рендеринг компонентов в ContentChildren из Angular

... x&gt; &lt;app-icon-box icon="#icon-one"&gt;content 1&lt;/app-icon-box&gt; &lt;app-icon-box icon="#icon-two"&gt;content 2&lt;/app-icon-box&gt; &lt;app-icon-box icon="#icon-three"&gt;content 3&lt;/app-icon-box&gt; &lt;/app-three-icon-box&gt; Во втором блоке кода 3 я пытаюсь отобразить &lt;app-icon-box&gt;, но не могу понять, как 2 это сделать. {{ box }} был просто идеей того, что 1 я пытаюсь сделать, но я просто полу ...

componentDidMount и конструктор

... е понимаю, почему. Ниже приведен код решения. может 2 кто-нибудь объяснить, в чем именно разница 1 ?? class ProductsIndex extends Component { constructor (props){ super(props); this.state = { array: [] } } componentDidMount(){ fetch('someUrl') .then(res =&gt; res.json()) .then(arr =&gt; { this.setState({ array: arr ...

Условное отображение компонентов JSF

... оящее время я пытаюсь создать 11 страницу JSF, где есть набор ссылок в виде 10 строки меню и набора форм. Я планирую сделать 9 следующее: при нажатии на ссылку будет отображаться 8 определенная форма. В ASP.NET я мог легко 7 получить элемент, а затем установить атрибут 6 для отображения. Мне интересно, есть ли 5 простой способ (черт возьми, даже любой 4 способ) ...

Как динамически импортировать компонент Vue 3?

... ate&gt; &lt;div class=&quot;page&quot;&gt; &lt;latest-box v-if=&quot;showLatestBox&quot; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; // @ is an alias to /src // This works well. //import LatestBox from '@/components/LatestBox.vue' export default { name: 'Page 1', data() { return ...

Как передавать данные между компонентами Razor на одной странице Blazor?

... } с этими двумя 10 компонентами Razor: @using BlazorBoinq.Data @using BgBearoffCoreNamespace; @inject BgBearoffService BoService &lt;label&gt;Position&lt;/label&gt; &lt;input type="text" spellcheck="false" @bind-value="@PositionText" @bind-value:event="oninput" /&gt; &lt;span&gt; = &lt;/span&gt; &lt;input type="number" step="1" @bind-value="@PositionId" @bind-value:event="oninput" /&gt; &lt;label&gt;Id&lt;/label&gt; @code { B ...

Отображение суммы значений в React JSX

... r /&gt; &lt;Form onsubmit={this.addMeal} /&gt; &lt;table className="table table-striped"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Meal&lt;/th&gt; &lt;th&gt;Calories&lt;/th&gt; &lt;th /&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; {this.state.meals.map(meal =&gt; ( &lt;Meal ...

Создать событие с параметрами в vue

... utton class="button" aria-haspopup="true" aria-controls="dropdown-menu"&gt; &lt;span&gt;{{selectedItem}}&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;div class="dropdown-menu" id="dropdown-menu" role="menu"&gt; &lt;div class="dropdown-content"&gt; &lt;a class="dropdown-item" v-for="item in drop" @click="$emit('select-menu-item($event)')"&gt; {{item.name}} &lt;/a&gt; &lt;/ ...

Как добавить компонент строки в таблицу в Angular 7?

... ation-z8"&gt; &lt;tr&gt; &lt;th *ngFor="let c of columns"&gt;{{c}}&lt;/th&gt; &lt;/tr&gt; &lt;tr app-table-row class="component-style table-row-component" *ngFor="let ch of characters | async" [character]="ch" [columns]="columns"&gt; &lt;/tr&gt; &lt;/table&gt; получить такие ошибки, как: Can't bind to 'character' since it isn't a known property of 'tr'. ("table-row ...

Как атрибут «привязка» работает в JSF? Когда и как его использовать?

... сгенерированного 5 вывода после ручного украшения и комментирования 4 (обратите внимание, что идентификатор j_id_jsp_1847466274_1 был 3 автоматически сгенерирован и что есть два 2 скрытых виджета ввода). Я использую Sun 1 JSF RI версии 1.2. &lt;form action="/TestJSF/main.jsf" enctype="application/x-www-form-urlencoded" id="j_id_jsp_1847466274_1" method="post" name="j_id_jsp_1847466274_1"&gt; &lt;input name="j_id_jsp_1847466274_1" t ...

React: передача реквизита функциональным компонентам

... . Контейнер export default class LookupForm extends Component { constructor(props) { super(props); this.state = { showModal: false }; } render() { let close = () =&gt; this.setState({ showModal ...

ReactJS разница между сохранением состояния и без сохранения состояния

... ную разницу между компонентами 12 React с сохранением состояния и без него. Хорошо, компоненты 11 без состояния просто что-то делают, но ничего 10 не запоминают, в то время как компоненты 9 с состоянием могут делать то же самое, но 8 они запоминают вещи внутри this.state. Это теория. Но 7 теперь, когда я проверяю, как это показать 6 с помощью кода, у меня возникли небольшие 5 пробл ...

React native: невозможно разрешить модуль. Действительно, ни один из этих файлов не существует:

... /floating_title_text_input_field'; export default class HomeScreen extends Component { render() { return ( // &lt;View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}&gt; // &lt;Text&gt;My First React App&lt;/Text&gt; // &lt;TextInput style={{height: 40, borderColor: 'gray', borderWidth ...