My ts code coding is,
this.api.getPay(this.donationId).subscribe(
data => {
this.paymentData = data;
this.paymentDetails = this.paymentData.donationDetails[0];
}
)
My html code is like
Project : <strong>{{paymentDetails.project_name}}</strong><br/>
Status: <strong>{{paymentDetails?.status}}</strong><br/>
Now project_name and Status details will be displayed. Console gets "ERROR TypeError: Cannot read property 'project_name' of undefined"
If I added "?" like
{{paymentDetails?.project_name}}
No Details displayed. But console not having any Error.
This same coding method works well in Angular 5/6.
Any special method for Angular 8 ???
MY console output in TS file is
{
project_name: "test",
status: "true"
}
Previous question is How to Display Values in Angular 8 Shows ERROR TypeError: Cannot read property 'project_name' of undefined
but solution not working
anyone know how to resolve ?
Everything seems good, check if your component doesn't have
changeDetection: ChangeDetectiongStrategy.OnPush
If so, remove it and put back the '?' in the html markup, and then add it back and do the change detection in the subscribe
Related
currently working on an issue and cant figure out why my page throws me an error.
Having this component:
<JobDetailSectionText
:variant="tmpl({ red: 1, blue: 4, yellow: 7 })"
:image-src="
jobProfile.attributes.imagePractice
? $strapi.options.url +
jobProfile.attributes.imagePractice.data.attributes.url
: '/static/img/praxisteil.jpg'
"
:image-alt="
jobProfile.attributes.imagePractice.data.attributes.alternativeText
"
>
In my content manager in Strapi I changed the „attribute.imagePractice" from required = true to false and now want to, if no file is added to the database show a default image in '/static/img/praxis.jpg‘.
But the console of the page gives me an error
"TypeError: Cannot read properties of null (reading 'attributes')
I tried to figure out the source of the problem but the page only works if I add and imagePractice in the backend, it won’t take the default img I tried to declare with the static path.
Any thoughts?
Thanks!
You can use optional chaining to check if property is exist
<JobDetailSectionText
...
jobProfile.attributes?.imagePractice
? $strapi.options.url +
jobProfile.attributes.imagePractice.data.attributes.url
: '/static/img/praxisteil.jpg'
"
...
>
#DinhTX solution is good, but note, that you cannot use optional chaining unless it's Vue 3. Read more here.
If you're using Vue version less then 3 you would need to write a computed property for that src attribute value where you'd check if attributes exist. Actually, I'd recommend you to use computed property anyway cause Vue's templates should be more HTML and less JS (not like React).
Example of computed property would be:
computed: {
jobSrc() {
const strapiUrl = `${$strapi.options.url}${jobProfile.attributes.imagePractice.data.attributes.url}`
return jobProfile.attributes?.imagePractice ? strapiUrl :'/static/img/praxisteil.jpg'
}
}
I'm having an issue in my project which uses Angular 5, NgRx, materialDesignBootstrap and chartsjs.
Essentially, when the charts are created, I get a list of console messages like the following (the charts properly display anyway):
Attempting to configure '_chartjs' with descriptor '[object Object]' on object '17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39' and got error, giving up: TypeError: Cannot define property _chartjs, object is not extensible - zone.js:2228
Attempting to configure 'push' with descriptor '{"configurable":true,"enumerable":false}' on object '17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39' and got error, giving up: TypeError: Cannot define property push, object is not extensible - zone.js:2228
Attempting to configure 'pop' with descriptor '{"configurable":true,"enumerable":false}' on object '17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39' and got error, giving up: TypeError: Cannot define property pop, object is not extensible - zone.js:2228
After a short investigation I read the doc about frozen object and found the code throwing these messages inside the chartsJs node_module folder, but i really don't know how to solve the issue.
Here is the charts markup:
<canvas mdbChart *ngIf="chartsData.length >= 1"
[chartType]="chartType"
[datasets]="chartsData"
[labels]="xLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="chartsData && chartsData.length >= 1"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
and here is a piece of the ts file:
#Input() chartData: Array<object>;
#Input() xLabel: Array<string>;
xLabels: Array<string>;
chartsData: Array<object>;
ngOnChanges(changes: SimpleChanges) {
if( changes.xLabel && changes.xLabel.currentValue.length > 0 && changes.chartData && changes.chartData.currentValue.length > 0 ){
this.chartsData = changes.chartData.currentValue.map(item => Object.assign({}, item));
/** this workaround solves a mdb library bug not updating xAxis label*/
setTimeout(function () {
this.xLabels = changes.xLabel.currentValue.slice(0);
}.bind(this), 0);
}
}
as you can see above, i tried to clone the input objects (they both come from the ngRx state), but it didn't solve the issue.
I'll be happy to provide any needed information. And I'm sorry if this is not quite a workable example, but you probably know it would require a tons of files to make an angular 5 working example xD
I'm getting this error: "TypeError: Event.$emit is not a function" whenever the watcher fires.
I can console log the Event object since I imported it in my main.js file.
I use a named prop because I have 3 different client tables on 1 page. I named the table as rmTable
<v-client-table name="rmTable" :data="filteredRMInvData" :columns="rmColumns" :options="rmOptions" v-if="rmInventoryData.length">
In my watcher:
materialType(value) {
Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
This is my customFilters in my rmOptions variable:
customFilters: [{
name: 'materialtype',
callback(row, query) {
console.log(row)
console.log(query)
return query.code.includes(row.material_group)
}
}],
How can I do this correctly? At least I should be able to see the row and query logs. I checked the guide on the github page and it seems I followed it correctly.
Assuming you have
Vue.use(VueTables.Event);
Then
materialType(value) {
VueTables.Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
Event is already a browser interface, which I'm guess is the reason it doesn't work.
I'm brand new to Ember and I'm using Konacha to test my app. I'm having trouble using the data store in my tests. The following code attempts to check if the itemText property of an Item model is equal to the displayed text in the DOM:
it "should display the item text", ->
item = undefined
Ember.run ->
item = store.find('item', 1) # store is defined in the spec helper
content = item.get('itemText')
console.log(item) # Logs the correct item
console.log(content) # Logs undefined
$('.list-item:eq(0)').text().should.equal content # Fails since content is undefined
Clearly, the content = item.get('itemText') is not doing what I'm expecting it to. However, running the same code line by line in the console gives me back the property I want, so I'm not sure where I'm going wrong. I have a feeling I may be testing this in entirely the wrong way, so any feedback is appreciated.
I think your console logs is ran before the the model is fetched. What you need is a promise, have a look.
it "should display the item text", ->
item = undefined
Ember.run ->
item = store.find('item', 1).then (item) ->
content = item.get('itemText')
$('.list-item:eq(0)').text().should.equal content
My goal is to take screenshot of a webpage using safari 6 via an extension. I am using this in my extension global page:
function handle_message(event) {
event.target.page.dispatchMessage("handle_message",
{image:
safari.application.activeBrowserWindow.activeTab.visibleContentsAsDataURL()
}
}
safari.application.addEventListener("message",handle_message,false);
On the receiving end the event message.image is undefined. Is there anything I need to do different. I can successfully send other tab properties such as url, just not the screenshot data image url. Any idea?
Thanks,
Stan
I found it myself, the method needs a callback (of course)
safari.application.activeBrowserWindow.activeTab.visibleContentsAsDataURL(
function(image_url){
//do something with image_url
}
)