Популярные вопросы по тегу 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<HTMLInputElement>) { 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') <div style="padding: 0.9rem" id="app"> <router-view name="bookBus"></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': '[email protected]'}); Но 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) => { return tcb.createAsync(MyComponent).then((fixture) => { let DOM = fixture.nativeElement; let myCom ...
Невозможно обновить компонент (приложение) при рендеринге другого компонента
... } } return ( <div className="App"> .... <div className='mixer'> <div key={1} className='vStrip'> <Knob size={150} value={panLevel} handleChangePan = {(e) => 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" > <svg className="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"> <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /> <path ...
Глобальные вспомогательные функции ReactJs
... заставят 10 этот компонент раздуться большим количеством 9 кода). Моя ленивая сторона просто хочет, чтобы 8 все они были какие-то глобальные функции, которые 7 могут вызывать компоненты. Я действительно 6 хочу сделать хороший код ReactJs. Вопрос: Каковы 5 лучшие практики с точки зрения глобальных 4 вспомогательных функций в Reactjs? Должен 3 ли я вставлять их в какой-то компонент или 2 просто вставлять ...
Тестирование функции, запускаемой событием "(window: resize)" в Angular 2
... аюсь протестировать функцию (с кармой), которая 7 запускается событием изменения размера окна. В 6 реальном мире все работает нормально, но 5 когда я пытаюсь вручную вызвать событие 4 в тесте, функция никогда не вызывается. Это 3 приводит к провалу теста. Вот мой HTML: <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> <app-icon-box icon="#icon-one">content 1</app-icon-box> <app-icon-box icon="#icon-two">content 2</app-icon-box> <app-icon-box icon="#icon-three">content 3</app-icon-box> </app-three-icon-box> Во втором блоке кода 3 я пытаюсь отобразить <app-icon-box>, но не могу понять, как 2 это сделать. {{ box }} был просто идеей того, что 1 я пытаюсь сделать, но я просто полу ...
componentDidMount и конструктор
... е понимаю, почему. Ниже приведен код решения. может 2 кто-нибудь объяснить, в чем именно разница 1 ?? class ProductsIndex extends Component { constructor (props){ super(props); this.state = { array: [] } } componentDidMount(){ fetch('someUrl') .then(res => res.json()) .then(arr => { this.setState({ array: arr ...
Условное отображение компонентов JSF
... оящее время я пытаюсь создать 11 страницу JSF, где есть набор ссылок в виде 10 строки меню и набора форм. Я планирую сделать 9 следующее: при нажатии на ссылку будет отображаться 8 определенная форма. В ASP.NET я мог легко 7 получить элемент, а затем установить атрибут 6 для отображения. Мне интересно, есть ли 5 простой способ (черт возьми, даже любой 4 способ) ...
Как динамически импортировать компонент Vue 3?
... ate> <div class="page"> <latest-box v-if="showLatestBox" /> </div> </template> <script> // @ 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 <label>Position</label> <input type="text" spellcheck="false" @bind-value="@PositionText" @bind-value:event="oninput" /> <span> = </span> <input type="number" step="1" @bind-value="@PositionId" @bind-value:event="oninput" /> <label>Id</label> @code { B ...
Отображение суммы значений в React JSX
... r /> <Form onsubmit={this.addMeal} /> <table className="table table-striped"> <thead> <tr> <th>Meal</th> <th>Calories</th> <th /> </tr> </thead> <tbody> {this.state.meals.map(meal => ( <Meal ...
Создать событие с параметрами в vue
... utton class="button" aria-haspopup="true" aria-controls="dropdown-menu"> <span>{{selectedItem}}</span> </button> </div> <div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-content"> <a class="dropdown-item" v-for="item in drop" @click="$emit('select-menu-item($event)')"> {{item.name}} </a> </ ...
Как добавить компонент строки в таблицу в Angular 7?
... ation-z8"> <tr> <th *ngFor="let c of columns">{{c}}</th> </tr> <tr app-table-row class="component-style table-row-component" *ngFor="let ch of characters | async" [character]="ch" [columns]="columns"> </tr> </table> получить такие ошибки, как: 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. <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"> <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 = () => 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 ( // <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> // <Text>My First React App</Text> // <TextInput style={{height: 40, borderColor: 'gray', borderWidth ...
