Web Development

Date: 2018-07-23T18:06:06.906Z
Hash: 4f65682650985a01a753
Time: 10797ms
chunk {main} main.js, main.js.map (main) 1.91 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 674 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

ERROR in src/app/app.service.ts(19,6): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(28,17): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(35,6): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(41,17): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(47,10): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css']
})

export class AppComponent{}

<big></big></big>

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

//import 'rxjs/Rx';
import { map } from "rxjs/operators";


@Injectable()
export class AppService {
    //URL for CRUD operations
    articleUrl = "http://localhost:3000/data";
    //Create constructor to get Http instance
    constructor(private http:HttpClient) { 
    }
    //Fetch all articles
    getAllArticles(): Observable<any[]> {
        return this.http.get(this.articleUrl)
	   .map(this.extractData)
	   .catch(this.handleError);

    }
	
    //Create article
    createArticle(article: any):Observable<number> {
	let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        return this.http.post(this.articleUrl, article)
               .map(this.extractData)
               .catch(this.handleError);
    }
    //Fetch article by id
    getArticleById(articleId: string): Observable<any> {
	console.log(this.articleUrl +"/"+ articleId);
	return this.http.get(this.articleUrl +"/"+ articleId)
	   .map(this.extractData)
	   .catch(this.handleError);
    }	
    //Update article
    updateArticle(article: any):Observable<number> {
        return this.http.put(this.articleUrl +"/"+ article.id, article)
               .map(this.extractData)
               .catch(this.handleError);
    }
    //Delete article	
    deleteArticleById(articleId: string): Observable<number> {
	return this.http.delete(this.articleUrl +"/"+ articleId)
	       .map(this.extractData)
               .catch(this.handleError);
    }	
    private extractData(res: Response) {
	let body = res;
        return body;
    }
    private handleError (error: Response | any) {
	console.error(error.message || error);
	return Observable.throw(error.status);
    }
} 

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

I have following line of HTML codes and I would like to show or display only four lines of description in each card and rest text would display when I click on "readmore" button, which probably render in different page/pages. Therefore how to limit the lines or characters in card-text in bootstrap. Help is appreciated:-

<div class="col-4 ml-2" *ngFor="let t of techBlogs">
            <div class="card shadow">
              <div class="card-body">
                <h2 class="card-title">{{t.title}}</h2>
                <h4 class="card-text">{{t.name}}</h4>
                <h4 class="card-text text-muted" id="run">{{t.postCreatedDate | date}}</h4>
                <h4 class="card-text">Description: {{t.description}}
                  <a href="#" class="btn btn-success btn-sm">read more..</a>
                </h4>
              </div>
            </div>
          </div>

 @using (Html.BeginForm("DeleteCustomer", "Forms", FormMethod.Post, new { enctype = "multipart/form-data", name = "Submitclaims" }))
{
<button class="btn" id="Delete" type="submit" formaction="DeleteRow" formmethod="post" name="command" value="Delete">Delete</button>
}

@{var message = ViewBag.Message;}
$("#DeleteDialog").dialog({
height: 280,
modal: true,
autoOpen: false,
  buttons: {
    'Confirm': function () {
        $.ajax({
            type: "POST",
            cache: false,
            url: "/Forms/MyMethod",
            success: function (data) {                                    
              @if (message == "Deleted"){
                ViewBag.Message = null;
                ViewBag.Status = null;
                <text>
                 alert("Successfully deleted!");                                            
                 jQuery("#jQGrid").clearGridData(true).trigger("reloadGrid");
                 jQuery('#jqGrid').trigger( 'reloadGrid' );
                 $('#files').empty();
                </text>
              }
            }            
         });
      $(this).dialog('close');
    },
    'Cancel': function () {
        $(this).dialog('close');
     }
  }
 });

public class LoginController : ApiController
{
    public UserEntity Login(string userName, string password)
    {
        // Return value
        UserEntity results = null;

        // Credential object
        var credentials = new CredentialEntity();
        credentials.UserName = userName;
        credentials.Password = password;

        // Create an instance of the App Security class
        var connString = "";
        var appSec = new ApplicationSecurity(connString);

        // Call Login
        appSec.Login(credentials);

        // Do stuff when logged in
        if (appSec.IsUserLoggedIn)
        {
            // Do some other stuff here

            // Return the current user's entity to the caller
            results = appSec.CurrentUser;
        }

        return results;
    }
}

$("#jqGrid").jqGrid({
       url: "/Folder/ShowProductsDetails",
       editurl: '/Folder/EditProductDetails',
       datatype: 'json',
       mtype: 'Get',
       ajaxSelectOptions: { type: 'POST' },

       viewrecords: true,
       prmNames: { id: "ProductsLineId" },
       sortname: "Purchase_Date",
       sortorder: "DESC",
       hoverrows: true
       },
       colNames: ['ProductsLineId', 'Purchase Date', 'Company'],
       colModel: [
           { key: true, hidden: true, name: 'ProductsLineId', index: 'ProductsLineId'},
           { name: 'Purchase_Date', title: false, stype: 'text', index: 'Purchase_Date', formatter: 'date',
             formatoptions: { newformat: 'm/d/Y' }, editable: true, formoptions: { rowpos: 1, colpos: 2,
             label: 'Purchase Date *' }, editrules: { required: true },
           },
           { name: 'Company', title: false, stype: 'text', index: 'Company', formatter: 'date',
             formatoptions: { newformat: 'm/d/Y' }, editable: true, formoptions: { rowpos: 1, colpos: 2,
             label: 'Purchase Date *' }, editrules: { required: true },
           }
           ],
           shrinkToFit: false,
           pager: jQuery('#jqControls'),
           rowNum: 50,
           rowList: [50, 100, 150, 200],
       scrollerbar: true,
       height: 'auto',
       autoheight: true,
       autowidth: true,
       viewrecords: true,
       caption: 'Uploaded Product Details',
       emptyrecords: 'No Records are Available to Display',
       jsonReader: {
           root: "rows",
           page: "page",
           total: "total",
           records: "records",
           repeatitems: false,
           id: 'ClaimsLineId'
       },
       multiselect: true
   }).navGrid('#jqControls', { add: false, edit: true, del: true, search: true, refresh: true},

   {//Code for Add},{//Code for Edit},{//Code for Delete}

public ActionResult ShowProductsDetails(string operation Product prod, string extraData)