How to fix "Property __ does not exist on type 'unknown' "
I'm trying to map data coming in from my Cloud Firestore collection and tried to call a specific type of key coming in. Instead it spat out Property 'desc' does not exist on type 'unknown'.ts(2339)
in my IDE. Any reason why this is occurring?
descArray;
idArray;
buses = [];
...
.subscribe(res => {
console.log(res)
this.descArray = res.map(thisbus => thisbus.payload.doc.data().desc);
console.log(this.descArray);
this.idArray = res.map(thisbus => thisbus.payload.doc.data().UID);
console.log(this.idArray);
for(let i in this.descArray) {
console.log(this.descArray[i])
console.log(this.idArray[i])
this.buses.push({
id: this.idArray[i],
desc: this.descArray[i]
})
}
EDIT: I put in a debugger line and did console.log(thisbus.payload.doc.data())
and returned this:
{UID: "001", desc: "Bus 33", lat: 47.522775, long: -121.82}
UID: "001"
desc: "Bus 33"
lat: 47.522775
long: -121.82
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ ()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
See also questions close to this topic
-
Adjust width of div on the fly using mouse in Angular
I want to adjust the width of a div in Angular using mouse controls. I want the div to have a border and I should be able to adjust the width using mouse controls only. How can this be achieved in a simple manner are there any packages available for the same?
-
Validation in Angular
I am trying to implement validation on my form fields so that you cant submit a blank review. What I was trying to achieve was to have the submit button appear after the fields have been populated. Also a message "Please fill in all fields before submitting the review!" was to be displayed but this does not happen. This is what i have so far but i cant get it to work:
html file:
<div class="container"> <div class="row"> <div class="col-sm-6"> <h2> Review this episode below </h2> <form [formGroup]= "reviewForm" (ngSubmit)='onSubmit()'> <div class="form-group"> <label for="username">Name</label> <input type="text" id="username" name="username" class="form-control" formControlName="username" [ngClass]="{'error': isInvalid('username')}"> </div> <div class="form-group"> <label for="comment">Please leave your review below</label> <textarea id="comment" name="comment" rows="1" class="form-control" formControlName="comment" [ngClass]="{'error': isInvalid('comment')}"> </textarea> </div> <div class="form-group"> <label for="rating">Please provide a rating 1-5 (5*=best)</label> <select id="rating" name="rating" rows="3" class="form-control" formControlName="rating"> <option value="1">1 star</option> <option value="2">2 stars</option> <option value="3">3 stars</option> <option value="4">4 stars</option> <option value="5">5 stars</option> </select> </div> <span *ngIf="isIncomplete()"> Please fill in all fields before submitting the review! </span> <button *ngIf="!isIncomplete()" type="submit" class="btn btn-success"> Submit Review </button> </form> </div><!--col--> </div><!--row--> </div><!--container-->
ts file:
import { Component } from '@angular/core'; import { WebService } from './web.service'; import { ActivatedRoute } from '@angular/router'; import { FormBuilder, Validators } from '@angular/forms' @Component({ selector: 'episode', templateUrl: './episode.component.html', styleUrls: ['./episode.component.css'] }) export class EpisodeComponent{ reviewForm; constructor(private webService: WebService, private route: ActivatedRoute,private formBuilder: FormBuilder) { this.reviewForm = formBuilder.group({ username:['',Validators.required], comment:['',Validators.required], rating:5 }) } ngOnInit() { this.webService.getEpisode(this.route.snapshot.params.id); this.webService.getReviews(this.route.snapshot.params.id); } onSubmit() { this.webService.postReview(this.reviewForm.value); this.reviewForm.reset(); } isInvalid(control) { return this.reviewForm.controls[control].invalid&& this.reviewForm.controls[control].touched; } isUntouched() { return this.reviewForm.controls.username.pristine || this.reviewForm.controls.comment.pristine; } isIncomplete() { this.isInvalid('username')|| this.isInvalid('comment')|| this.isUntouched(); } episode; }
-
How to disable unchecked checkbox and checked checkbox can be toggle? in ngFor loop in angular 8?
<div id="col-container"> <mat-card id="profile-card" *ngFor="let candidate of obj_users; let i = index; "> <img class=" candidates-image" mat-card-image src="{{candidate.photo }}" /> <mat-card-content> <h3 style="margin-bottom: 8px;"> {{ candidate.firstname }} {{ candidate.lastname}} </h3> <!-- <p *ngIf=""> PRESIDENT </p> --> <p> {{ candidate.position_id }} </p> <mat-divider [inset]="true"></mat-divider> <p> {{ candidate.platform }}</p> <p> {{ candidate.nation }}</p> <label class="switch"> <input [disabled]="disabledButton" (change)="OnChange($event , i)" id="checkbox" type="checkbox"> <span matRipple id="purecbx">VOTE</span> </label> </mat-card-content> </mat-card> </div>
-
Property 'onclick' does not exist on type 'Element'
I have the following component in angular
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-status', templateUrl: './status.component.html', styleUrls: ['./status.component.css'] }) export class StatusComponent implements OnInit { constructor() { } ngOnInit() { const acc = document.getElementsByClassName('accordion'); let i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle('active'); this.nextElementSibling.classList.toggle('show'); }; } } }
i'm retrieving the following error from the compiler
ERROR in src/app/components/status/status.component.ts(16,16): error TS2339: Property 'onclick' does not exist on type 'Element'.
Altough the compilation is success and all works as expected.
Should i ignore the error?
-
Amcharts: stacked columns with multiple series
I have multiple series in one chart, such as seen in this codepen:
let chart = am4core.create("chartdiv", am4charts.XYChart); chart.leftAxesContainer.layout = "vertical"; chart.numberFormatter.numberFormat = '# €'; chart.data = [ {name: "2011\nLorient", transport: 56, stay: 200, costByNight: 29, costByKm: 14}, {name: "2015\nPoitiers\nLa Rochelle", transport: 96, stay: 54, costByNight: 9, costByKm: 23}, {name: "2016\nRoyaume-Uni", transport: 160, stay: 332, costByNight: 47, costByKm: 62}, {name: "2016\nBiarritz", transport: 185, stay: 516, costByNight: 74, costByKm: 27}, {name: "2017\nRoyaume-Uni", transport: 258, stay: 355, costByNight: 36, costByKm: 24}, {name: "2018\nSingapour\nVietnam\nTaïwan", transport: 1020, stay: 622, costByNight: 41, costByKm: 8}, {name: "2018\nVietnam", transport: 753, stay: 294, costByNight: 49, costByKm: 8}, {name: "2019\nCanada", transport: 1074, stay: 342, costByNight: 38, costByKm: 13}, {name: "2019\nLorient\nGroix", transport: 77, stay: 190, costByNight: 27, costByKm: 20} ]; chart.padding(20, 5, 2, 5); // Cities/countries names let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.renderer.grid.template.location = 0; categoryAxis.dataFields.category = "name"; categoryAxis.renderer.ticks.template.disabled = false; categoryAxis.renderer.minGridDistance = 1; categoryAxis.renderer.labels.template.wrap = true; categoryAxis.renderer.labels.template.maxWidth = 100; categoryAxis.renderer.labels.template.fontSize = ".75em"; categoryAxis.renderer.labels.template.textAlign = "middle"; /* FIRST CHART */ // First Y axis let valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.tooltip.disabled = true; valueAxis.zIndex = 1; valueAxis.renderer.baseGrid.disabled = true; valueAxis.renderer.fontSize = "0.8em"; // Transport let series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Transport"; series.dataFields.valueY = "transport"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis; // Configure columns series.columns.template.width = am4core.percent(100); series.columns.template.tooltipText = "[font-size:13px]Transport : {valueY}"; series.columns.template.fillOpacity = .8; // Logement series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Logement"; series.dataFields.valueY = "stay"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis; // Make it stacked series.stacked = true; // Configure columns series.columns.template.width = am4core.percent(100); series.columns.template.tooltipText = "[font-size:13px]Logement : {valueY}"; series.columns.template.fillOpacity = .8; /* SECOND CHART */ let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis2.marginTop = 50; valueAxis2.tooltip.disabled = true; valueAxis2.renderer.baseGrid.disabled = true; valueAxis2.zIndex = 3; valueAxis2.renderer.fontSize = "0.8em"; series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Prix par 200km"; series.dataFields.valueY = "costByKm"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis2; series.stacked = true; // Configure columns series.columns.template.width = am4core.percent(40); series.columns.template.tooltipText = "[font-size:13px]Prix pour 200km : {valueY}"; series.columns.template.fillOpacity = .8; series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Prix par nuitée"; series.dataFields.valueY = "costByNight"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis2; // Configure columns series.columns.template.width = am4core.percent(40); series.columns.template.tooltipText = "[font-size:13px]Prix par nuit : {valueY}"; series.columns.template.fillOpacity = .8;
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 350px; }
<script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <script src="//www.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div>
What I would like to do and can't find out how is: - Make the top columns getting the width of the two corresponding bottom columns (like some kind of colspan) - Make the bottom series opposite, to have some kind of symetry (I tried opposite = true, but it made everything break) - Have the common x Axis between the two charts
The expected result is this: Expected result
Could you help to achieve at least one of those goals? Thank you!
-
Error while retrieving data from firebase?
I have developed an booking app,where i have given a field called promocode in firebase cloud firestore. in which i had created 2 promocodes in cloud firestore and any users were able to reduce the cost using the promocode. later i had to create the admin app so in that i have given an option for the admin for adding a new promocode from the admin app.the new promocode is getting stored in the database but im not able to use it in my user booking app.can someone help me please.
Here's my code:
TextEditingController promoController = TextEditingController(); void initState() { super.initState(); promoController.addListener(testListener); grandTotal = ticketprice * passengers; if (user != null) { auth.signOut(); } auth.onAuthStateChanged.listen((u) { setState(() => user = u); }); } if (promoCode != null && promoCode.isNotEmpty) { _firestore .collection('promo_codes') .where('promo_code', isEqualTo: promoCode) .getDocuments() .then((QuerySnapshot data) { if (data != null && data.documents.length > 0) { var documentData = data.documents[0]; if (documentData['price_reduction'] != null) { setState(() { total -= documentData['price_reduction']; }); } else if (documentData['percentage_reduction'] != null) { setState(() { total -= (total * documentData['percentage_reduction']); }); } setState(() { grandTotal = total; }); } }); } testListener() { setState(() { promoCode = promoController.text; }); }
i was not able to add my code here,so i have given all the things related to promocode above please kindly check,if someone wants more explanation about the problem i can give them.
whenever i had a new promocode from admin app and tires that promocode in my booking app i'm getting the following errors:
[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: type 'String' is not a subtype of type 'num' E/flutter (29549): #0 _MyAppState._onChanged.<anonymous closure>.<anonymous closure> (package:fire/main.dart:109:36) E/flutter (29549): #1 State.setState (package:flutter/src/widgets/framework.dart:1148:30) E/flutter (29549): #2 _MyAppState._onChanged.<anonymous closure> (package:fire/main.dart:108:13) E/flutter (29549): #3 _rootRunUnary (dart:async/zone.dart:1134:38) E/flutter (29549): #4 _CustomZone.runUnary (dart:async/zone.dart:1031:19) E/flutter (29549): #5 _FutureListener.handleValue (dart:async/future_impl.dart:140:18) E/flutter (29549): #6 Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:682:45) E/flutter (29549): #7 Future._propagateToListeners (dart:async/future_impl.dart:711:32) E/flutter (29549): #8 Future._completeWithValue (dart:async/future_impl.dart:526:5) E/flutter (29549): #9 _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:33:15) E/flutter (29549): #10 _completeOnAsyncReturn (dart:async-patch/async_patch.dart:291:13) E/flutter (29549): #11 Query.getDocuments (package:cloud_firestore/src/query.dart) E/flutter (29549): <asynchronous suspension> E/flutter (29549): #12 _MyAppState._onChanged (package:fire/main.dart:102:12) E/flutter (29549): #13 _MyAppState.build.<anonymous closure> (package:fire/main.dart:719:23) E/flutter (29549): #14 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14) E/flutter (29549): #15 _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:789:36) E/flutter (29549): #16 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) E/flutter (29549): #17 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:486:11) E/flutter (29549): #18 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:264:5) E/flutter (29549): #19 BaseTapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:236:7) E/flutter (29549): #20 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27) E/flutter (29549): #21 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:222:20) E/flutter (29549): #22 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22) E/flutter (29549): #23 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7) E/flutter (29549): #24 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7) E/flutter (29549): #25 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7) E/flutter (29549): #26 _rootRunUnary (dart:async/zone.dart:1138:13) E/flutter (29549): #27 _CustomZone.runUnary (dart:async/zone.dart:1031:19) E/flutter (29549): #28 _CustomZone.runUnaryGuarded (dart:async/zone.dart:933:7) E/flutter (29549): #29 _invoke1 (dart:ui/hooks.dart:273:10) E/flutter (29549): #30 _dispatchPointerDataPacket (dart:ui/hooks.dart:182:5)
-
How to fetch collection from firebase cloud firestore into a ViewPager?
friends I just implement code for the View pager. But now I am stuck with the problem that how to fetch a collection from the firestore into a view pager. Means I have a collection in that collection I have 2 documents. each document has some parameters. I want the "mSliderImage" parameter will be fetched into a ViewPager from each and every document.
My Code Some How Looks Like This.
I am using some dependencies for my custom viewpager.
implementation 'com.github.smarteist:autoimageslider:1.3.2' implementation 'com.github.bumptech.glide:glide:4.10.0' annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'
image_slider_myshop.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_auto_image_slider" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" /> <ImageView android:id="@+id/iv_gif_container" android:layout_width="80dp" android:layout_height="80dp" android:layout_gravity="bottom|start" android:layout_margin="50dp" /> <FrameLayout android:id="@+id/fl_shadow_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="@drawable/bg_overlay"> <TextView android:id="@+id/tv_auto_image_slider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:layout_marginBottom="25dp" android:padding="6dp" android:textColor="#FFF" android:textSize="18sp" /> </FrameLayout> </FrameLayout>
main_image_slider.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/mpm_slider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" app:cardCornerRadius="10sp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <com.smarteist.autoimageslider.SliderView android:id="@+id/imageSlider" android:layout_width="match_parent" android:layout_height="150dp" app:sliderAnimationDuration="600" app:sliderAutoCycleEnabled="true" app:sliderCircularHandlerEnabled="true" app:sliderIndicatorAnimationDuration="600" app:sliderIndicatorGravity="right|bottom" app:sliderIndicatorMargin="15dp" app:sliderIndicatorOrientation="horizontal" app:sliderIndicatorPadding="3dp" app:sliderIndicatorRadius="2dp" app:sliderIndicatorSelectedColor="#5A5A5A" app:sliderIndicatorUnselectedColor="#FFF" app:sliderScrollTimeInSec="7" app:sliderStartAutoCycle="true" /> </androidx.cardview.widget.CardView>
home_fragment.xml
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/background" android:fitsSystemWindows="true" android:overScrollMode="never" android:scrollbars="none"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:descendantFocusability="blocksDescendants" android:orientation="vertical"> <include layout="@layout/main_header"/> </LinearLayout> </ScrollView>
Java Codes:
Adapter Code: "The Images which get fetched in below switch cases code are an image which directly comes from google. Instead of this, I want image will get fetched from firebase firestore "Banner" collection for each document having "mSliderImage" parameter"
public class SliderImageAdapter extends SliderViewAdapter<SliderImageAdapter.SliderAdapterVH> { private Context context; private int mCount; public SliderImageAdapter(Context context) { this.context = context; } public void setCount(int count) { this.mCount = count; } @Override public SliderAdapterVH onCreateViewHolder(ViewGroup parent) { View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_slider_myshop, null); return new SliderAdapterVH(inflate); } @Override public void onBindViewHolder(SliderAdapterVH viewHolder, final int position) { viewHolder.itemView.setOnClickListener(new View.OnClickListener() { switch (position) { case 0: Glide.with(viewHolder.itemView) .load("https://laz-img-cdn.alicdn.com/images/ims-web/TB1pHADjBr0gK0jSZFnXXbRRXXa.jpg_1200x1200.jpg") .fitCenter() .into(viewHolder.imageViewBackground); break; case 1: Glide.with(viewHolder.itemView) .load(" switch (position) { case 0: Glide.with(viewHolder.itemView) .load(" switch (position) { case 0: Glide.with(viewHolder.itemView) .load("https://www.arihantwebtech.com/images/design-notice/banner-design.png") .fitCenter() .into(viewHolder.imageViewBackground); break; case 1: Glide.with(viewHolder.itemView) .load("https://www.arihantwebtech.com/images/design-notice/banner-design.png") .fitCenter() .into(viewHolder.imageViewBackground); break;") .fitCenter() .into(viewHolder.imageViewBackground); break; case 1: Glide.with(viewHolder.itemView) .load("https://www.arihantwebtech.com/images/design-notice/banner-design.png") .fitCenter() .into(viewHolder.imageViewBackground); break;") .fitCenter() .into(viewHolder.imageViewBackground); break; } } public int getCount() { //slider view count could be dynamic size return mCount; } class SliderAdapterVH extends SliderViewAdapter.ViewHolder { View itemView; ImageView imageViewBackground; ImageView imageGifContainer; TextView textViewDescription; public SliderAdapterVH(View itemView) { super(itemView); imageViewBackground = itemView.findViewById(R.id.iv_auto_image_slider); imageGifContainer = itemView.findViewById(R.id.iv_gif_container); textViewDescription = itemView.findViewById(R.id.tv_auto_image_slider); this.itemView = itemView; } } }
Home Fragment Code:
SliderView sliderMyshop; public static Fragment newInstance() { Bundle args = new Bundle(); HomeFragment fragment = new HomeFragment(); fragment.setArguments(args); return fragment; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (savedInstanceState == null) { } } public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable final Bundle savedInstanceState) { View view = inflater.inflate(R.layout.home_fragment, container, false); sliderMyshop = view.findViewById(R.id.imageSlider); final SliderImageAdapter sliderImageAdapter = new SliderImageAdapter(getContext()); sliderImageAdapter.setCount(4); sliderMyshop.setSliderAdapter(sliderImageAdapter); sliderMyshop.setIndicatorAnimation(IndicatorAnimations.WORM); //set indicator animation by using SliderLayout.IndicatorAnimations. :WORM or THIN_WORM or COLOR or DROP or FILL or NONE or SCALE or SCALE_DOWN or SLIDE and SWAP!! sliderMyshop.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION); sliderMyshop.setIndicatorSelectedColor(Color.WHITE); sliderMyshop.setIndicatorUnselectedColor(Color.GRAY); sliderMyshop.startAutoCycle(); sliderMyshop.setOnIndicatorClickListener(new DrawController.ClickListener() { @Override public void onIndicatorClicked(int position) { sliderMyshop.setCurrentPagePosition(position); } });
-
Cannot change region of functions on flutter
Ive switched my functions regions from the US default and I cannot find a way to call them in flutter?
Is there a method of setting the region on the CloudFunctions instance or when you make the function calls
Thanks for the help.
I have managed to get this to work
CloudFunctions(app: FirebaseApp.instance, region: "europe-west2").getHttpsCallable(functionName: functionName);
But I am no longer using the singleton.
Is this a bad solution?