Ionic 2 - services that cater to multiple needs

I am working on a project where I have a list of users, and each user can have zero, one, or many files. This creates a one-to-many relationship between the users table and the files table.

In my backend code, I store the list of users along with their files as part of the user entity. Now, in the front end, I need to display the user details along with any attachments (files) they may have.

Here is a snippet of my code:

user: {username?: string, password?: string, files: {docfile?: string}} = {};

    constructor(public navParams: NavParams) {
        this.user = navParams.data;
    }

And here is the corresponding HTML:

<ion-content padding>

        <ion-label>username : </ion-label>
        {{user.username}}
    </p>

    <p>
        <ion-label>Documents : </ion-label>
        <img src={{user.documents.docfile}}  />

    </p>

</ion-content>

Can anyone provide guidance on how to proceed with this setup?

Answer №1

Within your html code, you are referencing user.documents.docfile, yet in your typescript file, the filestring is set to user.files.docfile.

It is unclear what you have named the backend folder for docfile, but it seems to be labeled as files.

To resolve this issue, update your html code to utilize user.files.docfile. This should solve the problem if the file being referenced is an image.

If the file is not an image and is instead structured like this: files: [{docfile?: string}], then you will need to modify your html accordingly:

    <ion-label>Documents : </ion-label>
    <ion-list>
      <ion-item *ngFor="let file of user.files">
        <img [src]="file.docfile"/> <!-- Only if it's an image -->
      </ion-item>
     </ion-list>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

System CSS modules do not work correctly with Reactjs, CRA, TS, and Carco when using Less

Issues have arisen with the CSS module system in my project. Below are snippets from various code files and configurations: react-app-env.d.ts, craco.config.js, CircleButtonWithMessage.module.less, CircleButtonWithMessage.tsx, as described below: //react-a ...

Type with self-reference in index

Looking to create an interface with a mix of known and unknown members that should all have the same type. Here's what I have in mind: interface Foo { name?: string; [others: string]: Foo; } This setup would allow me to create something like ...

Converting Typescript fat arrow syntax to regular Javascript syntax

I recently started learning typescript and I'm having trouble understanding the => arrow function. Could someone clarify the meaning of this JavaScript code snippet for me: this.dropDownFilter = values => values.filter(option => option.value ...

Is it necessary to include both username, password, and token in every request following authentication?

Currently, I am utilizing the default guard api in Laravel for backend operations, while employing AngularJS for the frontend development. Here is the AngularJS code snippet used to retrieve data from the server: $http({ header: { 'Conte ...

Utilizing Angularfire OAuth for Facebook authentication in login strategy

After successfully implementing the code below in the loginCtrl controller and login.html, I encountered some issues with setting up the workflow correctly. My goal is to achieve something like this: //check if the current $scope has authData //if so red ...

Enhancing express.Request in typescript

I have found a method to easily enhance express.Request in typescript, like so: interface CustomRequest extends express.Request { userId: string; } However, when creating a middleware function utilizing this enhancement, for example: const customMiddl ...

Angularjs application and bash script generating different SHA256 hashes for the same file

In my AngularJS app, I am struggling to get the digest of an uploaded file. The issue is that the resulting hash is not matching the one obtained using bash locally. Initially, I used jshashes, but when I noticed discrepancies in the hashes generated by t ...

The `$scope variable fails to update in another controller`

I am currently facing an issue with updating a value on my view. Let me walk you through my code along with a brief explanation of the situation. The code may look messy as I have been experimenting with different combinations lately. The controller in qu ...

Utilizing validation criteria again in Angular applications

While Angular's form validation states offer great granularity, managing them can become unwieldy when dealing with a form containing numerous fields. Even just two fields can make your markup feel bloated. Consider the code snippet below: <form n ...

Route protection is ineffective when dealing with two observables simultaneously

After writing the route guard as shown below, I encountered an issue with the else statement that was not returning a result, even though it should have. Surprisingly, there were no errors either. this.hotelSettingsService.get().pipe(map(res => { ...

Creating synchronization mechanisms for events in JavaScript/TypeScript through the use of async/await and Promises

I have a complex, lengthy asynchronous process written in TypeScript/JavaScript that spans multiple libraries and functions. Once the data processing is complete, it triggers a function processComplete() to indicate its finish: processComplete(); // Signa ...

What is the rationale behind the common practice in AngularJS to name a service as a factory

When exploring examples of using Services in AngularJS, it's common to come across instances where the service is actually implemented as a factory. For example: angular.module('myModule').factory('customerService', [ &apo ...

The speed of the OpenLayers web application is significantly hindered when accessed from a mobile device using Android

Although it may seem like a common question that should be closed, I have reached a roadblock and cannot find a solution. I hope to provide enough details to make this question suitable for SO. I am currently working on an OpenLayers web application that ...

Troubleshooting: Inoperative AngularJS buttons with ng-click

Learning AngularJS has been an exciting journey for me. I'm experimenting with toggling a modal by using ng-if and ng-click. Basically, in my controller, I've defined a scoped variable called "aboutOn". If it's true, the modal is displayed; ...

Dealing with nullable objects in Typescript: Best practices

Looking for a solution to have a function return an object or null. This is how I am currently addressing it: export interface MyObject { id: string } function test(id) : MyObject | null { if (!id) { return null; } return { ...

Progress bar designed for simultaneous ng-apps on a single webpage in Angular

I have been utilizing the angular loading bar plugin, but I have encountered a challenge when trying to use it on pages with multiple ng-app declarations. https://github.com/chieffancypants/angular-loading-bar Currently, I am only able to add the depende ...

How come my $scope variable is only being updated in the HTML and not in the controller while working with Bootstrap and AngularJS?

Utilizing UI Bootstrap from Angular, I have implemented a modal overlay where users can select an item from a dropdown box. However, I am facing an issue where the selected value is not accessible in the controller of the overlay. In the HTML code for the ...

How to hide functions in Angular source code

Here's a common query. Typically, the code we develop in Angular gets compiled into a bundle file that is then sent to the browser, correct? The JavaScript code we write can be easily seen as is in the bundle file when viewing the source. How can we ...

Obtaining a PDF file through JavaScript that works on all browsers without compatibility issues

While I am able to successfully download a PDF using AngularJS in Chrome, it seems to encounter issues with the latest versions of FireFox, Internet Explorer 11, and Edge. It appears that a shim is required for IE9, although the current one doesn't se ...

Customize nestjs/crud response

For this particular project, I am utilizing the Nest framework along with the nestjs/crud library. Unfortunately, I have encountered an issue where I am unable to override the createOneBase function in order to return a personalized response for a person e ...